Vertical align inside CSS grid
Do you always forget how to vertically-align elements within a div, using CSS Grid? Don't feel alone, because I do too and I always end up here. Essentially, these two properties can be applied to the div containing elements that need to be vertically-centered:
.some-class {
display: grid;
align-items: center;
}
Here is a JSFiddle example for anyone curious on how these properties work.
Resources
- grid-template
- justify items
- align items
For the Flexbox solution, you have to add display:flex
and align-items: center
to .two, so the CSS becomes like this:
.two {
border-style: solid;
border-color: yellow;
grid-column: 1 / 3;
grid-row: 2 / 4;
display: flex;
align-items: center;
}
Then add flex: 1
to .vertical:
.vertical {
flex: 1
}
Here is the full code:
.wrapper {
display: grid;
border-style: solid;
border-color: red;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
/* width: 100vw; not needed */
height: 100vh;
}
.one {
border-style: solid;
border-color: blue;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.two {
border-style: solid;
border-color: yellow;
grid-column: 1 / 3;
grid-row: 2 / 4;
display: flex;
align-items: center;
}
.vertical {
flex: 1;
}
.three {
border-style: solid;
border-color: violet;
grid-column: 1;
grid-row: 4 / 5;
}
.four {
border-style: solid;
border-color: aqua;
grid-column: 2;
grid-row: 4 / 5;
}
progress {
width: 100%;
background-color: #f3f3f3;
border: 0;
height: 2em;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">
<div class="vertical">
<progress max="100" value="80">
<div class="progress-bar">
<span style="width: 80%;">Progress: 80%</span>
</div>
</progress>
</div>
</div>
<div class="three"> Three</div>
<div class="four">Four</div>
</div>