FAQ: CSS Grid Essentials - Fraction

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Fraction” exercise from the lesson “CSS Grid Essentials”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn CSS

FAQs on the exercise Fraction

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

grid-template-columns: 3fr 50% 1fr;
and
grid-template-columns: 3fr 4fr 1fr;

Don’t these lines do the same?

1 Like
3

Confused by fr exercise? Does anyone have a simple explanation of how they understood this exercise?

2 Likes
4

Just going through lessons myself, so corrections are welcome;

Using fr is a way to use fractions to divide the space. The bottom of the fraction is determined by how many units of fr you use overall.

Say you have 1 column:

grid-template-columns: 1fr;

That means that column is 1/1 of the width of the grid.
But now you add a second column:

grid-template-columns: 1fr 1fr;

Now each column is 1/2 of the width of the grid. Each column is 1fr and there are a total of 2fr, so 1/2.
And this extrapolates out:

grid-template-columns: 1fr 2fr 1fr 5fr;

Now there are four columns, and a total of 10fr. So, in order, each column width is 1/10, 2/10, 1/10, 5/10.

Also, the fractions only account for undefined width. If any of your columns have a defined width, it is ignored from the fraction.

grid-template-columns: 1fr 2fr 1fr 5fr 50%;

We’re still at 10fr total, but the new column is set to 50% of the width, so now the fraction columns are fighting over half of the space they had before.

Say that:

width: 1000px;

Before we introduced the 50% column, the column sizes would have been 100px (1/10), 200px (2/10), 100px (1/10), 500px (5/10).

But with the 50% column introduced and stealing 500px of the total 1000px, the fraction column sizes have changed: 50px (1/10), 100px (2/10), 50px (1/10), 250px (5/10).

Hope that all makes sense and I’m not spouting anything super wrong!

14 Likes
7

“By using the fr unit, we can define the size of columns and rows as a fraction of the grid’s length and width.”

Shouldnt that be height and width? I mean, I get what you mean with length, but wouldn’t it be easier to understand if the actual term of the correct property was used?

8

Looks like it to me!

The second declaration divides the container width into 8 fractional pieces, thus 4fr = 50% of available width space.

9

In the sixth exercise how did they divide 500 pixels into 1 fr each? What is the calculation?

1 Like
10

No, not exactly.

grid-template-columns: 3fr 50% 1fr;

In this example, we are splitting it up into 4 pieces (3 + 1). So 3fr is equal to 3/4 and 1fr is equal to 1/4

grid-template-columns: 3fr 4fr 1fr;

In this example, we are splitting it up into 8 pieces (3 + 4 + 1). So 3fr is equal to 3/8, 4fr is equal to 4/8 (which is 50% so is the only one correct) and fr is equal to 1/8. If you wanted to replicate it exactly, you would write:

grid-template-columns: 6fr 4fr 2fr;

When using fr, always count how many we used. So 1fr 1fr 1fr means we split it up into 3 pieces (1 + 1 + 1). So, in this case, the denominator of the fraction would be 3 and the numerator would be whatever the value is. So 1fr would be equal to 1/3 - so 1 third of 500px

1 Like
11

Hello,
I’m not really good at mathematics, and my english is not my first language thought, but i don’t really get your explanation.

Imagine we have :

width: 1000px;
grid-template-columns: 3fr 50% 1fr

So :

  • second column : 50% = 500px
    remaining space is 500px)
  • first column : 3 x 125 = 375px
  • third column : 1 x 125 = 125px

now we have

width: 1000px;
grid-template-columns: 3fr 4fr 1fr;

1000px / 8fr = 125px each fr

  • first column : 3 x 125 = 375px
  • second column: 4 x 125 = 500px
  • third column : 1 x 125 = 125px

So it looks exactly same for me… If i analyze your answer, you said something equal to the first situation will be

grid-template-columns: 6fr 4fr 2fr;

here we have 12fr in total, every row is 83px (1000 / 12)

  • first column is 500px (6fr)
  • second is 333 px (4 * 83)
  • third is 166px

Maybe i’m wrong but your answer doens’t looks logic for me ^^

1 Like
12

All your answers are correct, though you didn’t give the total of the 3rd example. Maybe you didn’t understand what I was trying to say, but it’s basically the same logic :slight_smile:

13

You’re absolutely right. It was quite frustrating to get it right and then be told I did it wrong because I used ‘4fr’ instead of ‘50%’. If I have a grid with a final sum of 8fr, then 4fr is 50% of that. So I wasn’t a huge fan when I got a fault for making that exercise work using only fractions because they wanted us to mix and match when it was perfectly possible to achieve the exact same result with fractions as with percentage. 4fr is 50% of 8fr, which is precisely what you get if the other two columns are 3fr and 1fr, and the middle column is 50%…

14

I think the problem is in the logic of your first example. You are seeing 3fr as 3 quarters of 4, but it’s 3 parts of 8 (because of the 50% column). If we have one column that takes up 3fr and one that takes up 1fr, and a third column that takes up 50%, we know that that column is 4fr (because it’s the same as the total width of the other two columns). So both answers have the same result: the grid is split in 8ths, and the middle column can either be expressed as 50% (a value that depends on the total width of the grid), or 4fr (a value that depends on the fractions of the other columns).

1 Like
15

How are the fractions different to percentage? Is there any difference in the below codes?

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-template-columns: 25% 25% 25% 25%;

16

The example shows the height is 400px therefore the rows should be 2fr 1fr 1fr (which gives us total of 4 matching the height of 400px) ,however in the exercise instruction the height is 500px, why the rows should be 1fr 1fr 1fr? shouldn’t they be 3fr 1fr 1fr which gives us the total of 5 matching the 500px?

17

The given values are fractional values, so 1fr 1fr 1fr denotes to divide the given height evenly into 3 sections, so each of them would yield 1 / 3 * 500 in px units. As for 2fr 1fr 1fr, it means there are 3 sections, in which the first row would have a height of 2 / 4 * 500 → 250px whereas the other 2 should have 125px respectively. The point here is that those numbers are just a mere representation of percentages or proportions (numerators of a summed denominator from all of them) and they are computed based on the height (for row) and width (for columns).

1 Like