4

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?

enter image description here

The code for the grid:

.video-grid {
 display: grid;
 grid-gap: 20px;
 grid-template-columns: repeat(3, 1fr);
}
Steve
  • 14,401
  • 35
  • 125
  • 230

2 Answers2

2

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.

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
1

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

Amaan Kulshreshtha
  • 525
  • 6
  • 19
  • 2
    All three children are already stretched to the whole height (look at the white background area). The problem is to make their content take all their height, so that the gray footers stick to their bottom. – Ilya Streltsyn Oct 25 '17 at 18:19