Vertical align inside CSS grid

Question

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?

[Centering in CSS Grid](https://stackoverflow.com/q/45536537/3597276) — Michael Benjamin, Nov 11 '17 at 11:53
you can eventually center box `.two` to use the mimal CSS required `.two {align-self:center;}` . https://codepen.io/anon/pen/wPJZMv see this quiet clear tutorial for beginners: https://css-tricks.com/snippets/css/complete-guide-grid/ — G-Cyrillus, Nov 11 '17 at 12:17

score 16 · Answer 1 · answered Apr 24 '18 at 16:09

16

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

answered Apr 24 '18 at 16:09

Doug Wilhelm

776
9
26

2

Such a much simpler solution – kb. Jul 21 '20 at 09:38
2

I think this should be the accepted answer because of its simplicity and directly addresses the grid system (nothing to do with flexbox). – Dan Marshall Nov 02 '21 at 01:13

score 10 · Accepted Answer · edited Oct 31 '19 at 00:14

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>

VXp · Answer 3 · 2019-10-31T11:40:32.477

Add display: grid and align-items: center to the .two div, but you could also use the align-self: center on the .vertical div if the usage of the align-items: center on the parent is avoided:

.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 {
  display: grid; /* Added */
  align-items: center; /* Added */
  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;
}

/* Optional, without the usage of the align-items: center; on the .two div
.vertical {
  align-self: center;
}
*/

<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>

score 0 · Answer 4 · edited Oct 31 '19 at 00:21

0

Give the progress extra style. position absolute, top, and transform: translate.

Don’t forget to add position:relative to the parent of progress:

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  height: 2em;
}

edited Oct 31 '19 at 00:21

Peter Mortensen

30,738
21
105
131

answered Nov 11 '17 at 09:07

Andre Ramadhan

427
2
14

I have tried in codepen and it is working. How come not useful? – Andre Ramadhan Nov 11 '17 at 09:09
2

I guess because absolute positionning is not required and is not related to the GRID CSS system :( It is also in my personnal opinion a bad advise. – G-Cyrillus Nov 11 '17 at 12:19
I'm just trying to figure out a simple solutions. I believe it is CSS and will be related to any kind of GRID CSS system. But if you think it was bad and not required, no problem then. But its working anyway. – Andre Ramadhan Nov 11 '17 at 12:30

Vertical align inside CSS grid

4 Answers4

Linked