Fraction units (fr) on rows

I have a problem understanding how the rows in this project share the space, all the content is in a .grid container with 6 rows:

grid-template-rows: 100px 8fr 5fr 4fr 5fr 80px

But how does this work? the height is not explicitly specified, something that in previous lessons was a common thing,

The project:
PupSpa Project

Hey @carlosbuentello48086

I am quite new myself, but I will try to help :nerd_face:
In order to understand how Fractions work, we should learn more about them:

  • The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.
  • The free space is calculated after any non-flexible items.

You have 6 rows in your Container, and 2 of them use a Fixed/Absolute unit (px/pixel) the other 4 use fr/fraction.
If you add all your fractions together, you get 22fr, right? And the first fraction (100px 8fr 5fr 4fr 5fr 80px) is using 8 fractions of the free space you have from those 22fr. Then you’re left with 14fr, which is all used/spread over the row.

An easier example would be:
grid-template-rows: 1fr 1fr 1fr;
This will set each item/row to one third the height of the row container. A translation for this would be that each row would get 33.3% of the container height.

I hope that I made some sense there, sorry if it is a bit hard to understand :grimacing:
I would definitely recommend visiting Complete Guide to Grid whenever you’re feeling stuck with CSS Grid. And after you’ve been playing with Grid a bit, it will all be easier! I know because I’ve been in your shoes.


1 Like

However many objects you have, given as much space as each is allowed, calculated into rational terms that add up to unity.

1/2 + 1/3 + 1/4 + 1/5 + ...

The LCM of the denominators will be the fraction base of fr that eventually gives us unity, the space allowed.

Yeah, it’s a head turner. Makes one think. That’s a good thing.

1 Like