Making a css grid equal height rows independently

Question

I'm trying to make a css grid with equal height rows (it's a product grid). Right now all rows are equal height, but they should be equal height independently, meaning not all rows should be 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;

question from:https://stackoverflow.com/questions/65843356/making-a-css-grid-equal-height-rows-independently

Answer 1

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

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