grid item size when using fr in rows
Hey, if i'm not mistaken, when there's no specific height on a grid container and there are rows set using fr, each row is set to the height of the tallest child no matter the height of the content of the individual children. When i tell a child to span two rows, it distributes it's size between the two rows rather than doubling in size as it theoretically should. In the first image, before making it span two rows, at first glance it looks like the height of the card should be the size of the red outline however in the second image, after making it span two rows, it distributes itself between the two instead. Why is this it's behavior? I'd like to understand how all this stuff works in depth a little more, thanks in advance.
https://codepen.io/deerCabin/pen/QWXbgpm
10 Replies
1fr just means "1 fractional part of the available space"
you have
1fr 1fr for the rows
when you span 2 rows, it's splitting the height into 1fr 1fr
when you don't span, the height of the first row will be used on the 2nd row
when you don't span, you're saying "1fr is the height of this element"
that's why you get 2 rows with the same height
if you do 2fr 1fr, you will see that the 2nd row will be half the height of the first rowohh that makes sense, thank you
you're welcome
just remember: 1fr isn't a fixed unit
it's just a part of the available space
alright, i'll remember that
You can also use floating point numbers. Just mentioning 🤘
yes, using 0.5fr is useful, sometimes
ah cool, i'll bear that in mind too, thanks
a quick additional question, if setting a row size of
1fr is the height of the content, what would be the difference between 1fr and auto if you have a paragraph for example?well, 1fr will be 1 fractional unit of the space, while auto will do what the mdn documentation says
alone, they will behave the same
i think
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#auto <-- this
ah okay i see, thank you
you're welcome