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
example-1.png
example-2.png
CodePenR
...
fr row query
Was this page helpful?