I would like to have a giant progressbar which is vertically aligned inside a CSS grid.
The problem is, vertical alignment inside CSS grid is not working for me. I tried on Firefox, and also on Chrome.
I tried vertical-align: middle
, but it is not working. I have put a Flexbox inside the grid item, but still it is not working.
Here is my minimal example:
.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;
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;
}
.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>
A demo: https://codepen.io/anon/pen/OOpdPW
How do I align the progressbar vertically (inside its grid item) of the above demo project?
One of the easiest ways of centering the content of grid items is using Flexbox. Set the display to "grid" for the grid container, and "flex" for grid items. Then, add the align-items and justify-content properties, both with the "center" value, to grid items.
align-itemsAligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With