CSS Grid Fractions

I am on page 6/15 of the grid class, and I am trying to learn fractions.

I have been tasked to create columns within a box, the width of which is 400px.
The Question: Change the grid so the middle column is still 50% of the grid, but the first column takes up three fourths of the remaining space and the last column takes up one fourth.

The academy says that the solution is this (and that all fractions must add to four):
grid-template: 3fr 50% 1fr;

But, I got the same result when I wrote the following: grid-template: 0.75fr 2fr 0.25fr;

Am I wrong in some other way? I came up with my solution by thinking that half of 400px must go the middle, so we must split the grid by 2fr (in half). What’s left is 200px that I can work with; 1/4 (0.25fr) of that can go to the right; 3/4 (o.75fr)to the keft

Hello!

While I think this will work in all cases, for the sake of readability, have whole numbers on fractions is the best way to do it. (You can do it any way, as long as all of the fr add up to the amount you need-you could also do 9fr 50% 3fr, but it wouldn’t be as readable).
I hope this helps!

2 Likes