Search code examples
csscss-grid

Making a CSS grid equal height rows independently

I'm trying to make a CSS grid with equal-height rows (it's a product grid). Right now all rows are equal in height, but they should be equal in height independently, meaning not all rows should be the same height, just each row should be the height of the largest column on that specific row.

Right now my CSS is like this:

grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
display: grid;

But how can I make each row adjust its height based on the biggest column in any given row?

Hope that makes sense

Solution

  • You need to remove grid-auto-rows: 1fr; or set auto(grid-auto-rows: auto;)

    check example:- https://codepen.io/rvtech/pen/qBaGEoW