I am quite new myself, but I will try to help
In order to understand how Fractions work, we should learn more about them:
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
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.