title: How do I do a single row, vertically centered, layout in CSS grid?
body: <p>I am trying to do a single row, vertically centered layout using CSS grid. Here's a rough sketch:</p>
  <p><a href="https://i.stack.imgur.com/I2Uif.png" rel="noreferrer"><img src="https://i.stack.imgur.com/I2Uif.png" alt="enter image description here" /></a></p>
  <p>Note:</p>
  <ul>
  <li>I have a single row of items</li>
  <li>The items are (probably) going to be the same width</li>
  <li>I do not know many items I have (so I don't want to have to say '200px' eighty times)</li>
  <li>The items are of different heights, but need to be vertically centered</li>
  </ul>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;box a&quot;&gt;A&lt;/div&gt;
      &lt;div class=&quot;box b&quot;&gt;B&lt;/div&gt;
      &lt;div class=&quot;box c&quot;&gt;C&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.wrapper {
      display: grid;
      grid-gap: 10px;
      grid-auto-columns: 200px;
      background-color: #fff;
      color: #444;
      .box {
          background-color: #444;
          color: #fff;
          border-radius: 5px;
          padding: 20px;
          font-size: 150%;
      }
  }
  </code></pre>
  <p>I've tried this ibut it really wants to do multiple rows instead of multiple columns on one row.</p>
  <p><strong>Can I do a single row, vertically centered layout in CSS grid? If so, how?</strong></p>