How do I do a single row, vertically centered, layout in CSS grid?

To force all items into a single row, set them to grid-row: 1.

To center the items, set the container to align-items: center, or each item to align-self: center. (align-self inherits the align-items value by default).

.wrapper {
  display: grid;
  align-items: center;     /* new */
}

.box {
  grid-row: 1;             /* new */
}

.box.a { height: 200px; }
.box.b { height: 20px;  }
.box.c { height: 120px; }
.box.d { height: 50px;  }


/* non-essential decorative styles */

.wrapper {
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
body {
  margin: 40px;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Here's a working example. It works just as well as the other answer, but uses different CSS to avoid setting the grid row explicitly. Click 'Run' below:

  • grid-auto-flow: column; makes items flow across columns, ie into a single row
  • align-self: center; does vertical centering

.wrapper {
    display: grid;
    grid-auto-flow: column;  
}

.box {
    align-self: center;
}

/* Additional styles below */

.wrapper {
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

body {
  margin: 40px;
}
  
.box.a {
     height: 200px;
}
    
.box.b {
  height: 20px;
}

.box.c {
  height: 120px;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
</div>

Tags:

Css

Vertical Alignment

Css Grid

Recent Posts