Items inside a CSS Grid fill the row height? [duplicate]

Question

I have found many answers showing how to set a CSS Grid (using display: grid) rows to match the tallest item in the grid, but what I'm looking to do is size the items inside the grid to match the grid.

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?

The code for the grid:

.video-grid {
 display: grid;
 grid-gap: 20px;
 grid-template-columns: repeat(3, 1fr);
}

Answer 1

You can set display: flex; flex-direction: column to your grid items and make the part you want to fill all the available height grow with flex: 1. A similar approach was used in this article.

Answer 2

use justify property in the second and third child to stretch them in the full div, or make a parent div for these the second and third child respectively, and then make the inner children i.e the second and third child have the display as grid.

You can see the correct commands here