title: Items inside a CSS Grid fill the row height?
body: <p>I have found many answers showing how to set a CSS Grid (using <code>display: grid</code>) rows to match the tallest item in the grid, but what I'm looking to do is size the <em>items inside the grid</em> to match the grid.</p>
  
  <p>For example, here's a sample row in the grid.  See how the first item is flush to the grid, while the other 2 items are shorter and have white space below them (since their title are shorter)?  How can I get all the items to fit the grid itself?</p>
  
  <p><a href="https://i.stack.imgur.com/rRJxr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRJxr.png" alt="enter image description here"></a></p>
  
  <p>The code for the grid:</p>
  
  <pre><code>.video-grid {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(3, 1fr);
  }
  </code></pre>