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...
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
Must Read
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 analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
