Learn CSS: Grid - Fraction

In this exercise, in step 2, how grid calculate 1/3 fr of 500px?Can someone explain that?

You don’t need to calculate 1/3 of the height-CSS will do that for you. What way can you have an equal fraction(hint) size of each row.

Hint if you're stuck

When you have a row of 1fr, it sets it to the whole size of the available space. If you set a row to:

row a: 1fr
row b: 2fr
row c: 3fr

In this case, row a takes up 1/6 of the available space. row b takes up 2/6 or 1/3 of the available space. And row c takes up 3/6 or 1/2 of the available space.

1 Like