Auto and min content property for grid-template-rows

Hey, suppose if I have 3 rows, the moment I use auto or min-content for all three rows as:

grid-template-rows: repeat(3, min-content);

grid-template-rows: repeat(3, min-content);

They all size equally, why is that? (2nd screenshot is with repeat(2, min-content) 1fr

4 Replies

Chris Bolson•5d ago

That shouldn't happen. Can you share more of the code, ideally in a Codepen or similar?

MarkBoots•5d ago

I think it is because min-content and auto potentially leave remaining space. if the grid has a set height, what should be done with that? probably it will be devided over them. In your second screenshot, with only 2 rows set, a third one is created because of the 3 childs. becuase that one doesnt have a set template-row, that will fill the remaining space nope, tested that, that's not it. it looks like the rows are added with the remaining space of the grid height, so i think there might be a typo (or something that is overriding it) that makes the grid-template-rows size auto

Aek.OP•5d ago

you were right or are 😅 I removed grid area and it fixed the probe but then I am using grid area for the whole layout so.. lemme think

MarkBoots•4d ago

create a codepen so we can look at it

Gaming

Programming

Auto and min content property for grid-template-rows

Did you find this page helpful?