Equal Height Rows in Css Grid Layout

Equal Height Rows in Css Grid Layout

I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?

To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest "cell" should dictate the height of all cells, not just the cells in its row.

2 Answers

Short Answer

If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here's a quick and simple solution:

  • Set the container to grid-auto-rows: 1fr

Sophia Al-Mansoor
Author

Sophia Al-Mansoor

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.