The Fraction (fr) Unit in CSS

Daryl Duckmanton
A free video tutorial from Daryl Duckmanton
Full Stack Software Developer
4.7 instructor rating • 2 courses • 41,974 students

Lecture description

In this video we will cover the new fraction (fr) unit and how we can use it to allocate remaining space to grid items.

Learn more from the full course

Mastering CSS Grid 2020 - With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven

17:13:59 of on-demand video • Updated October 2019

  • How to implement responsive layouts using CSS Grid
  • How to build regular layouts in CSS Grid
  • All properties that are part of the CSS Grid Specification
  • How to build commonly used sites such as YouTube using CSS Grid
English [Auto] Hello everyone. In this video we're going to be looking at the fracture in so let's get to it okay. So understanding how auto can help us create equally sized tracks is great and everything but it has one very important limitation. What is it do you say. Well let me answer that by asking you this question What if you want to have one row or column Track B twice the size of the other maybe you want it to be three times the size with order. We can't do this. We can only at best my tracks equals size and that's it. With that said the W three C introduced a new as a unit known as a fraction and how this fraction works is that just like auto it will attempt to take up the remaining space of the Greek container. However how much space it takes up can be determined by ratio logic. Now because of this there will be some mathematics due to this video. But I'll do my best to make the mathematics as simple as possible. So let's get started. And before I write anything I just want to quickly point out that each Greek container in this video is exactly 600 pixels wide. Just to make things easy to calculate. So for the first example we once again create two evenly sized columns. But this time we're going to use fractions. So I'm going to come over to my selector and I had ago grid template columns and this Thomas report 1 and a 1 and this to represent the ratio of 1 to 1. And then after each number we just put a file to represent fractions and save this. We're going to say we have two evenly sized columns right. If I open up debugger and check this out you'll see that there three hundred apiece because the overall grid is 600 pixels. So therefore we have two columns of equal with 300 pixels. Go now we do the same thing for rows. So I'm going to actually copy this up here just to make things easier on myself. Copy paste and we'll add a height here as well. And say we'll go 300 pixels and then basically I'll go a grid template rose and then once again I'll go one too far and one too far. And when I save this we get to evenly source rows as well. And because the height of the grid is three hundred pixels high. Each row is going to be 150 pixels high. Get pull. So for the next one I'm going to show you what happens when we use fractions that aren't even I. The ratio is not a one to one. So do that until the tile grid template columns 1 5 for the first column and then to make the second column twice the size. And we do that by using a two here. And so we're saying the second one is twice the size of the first i.e. we're using Ratio g. Now if I say that we now get this down here. Right. So if we check this out basically it should be 200 pixels by 400 pixels and it is. Now how you can calculate this is that what you generally do is add the numbers of all the columns that have if are after it together. So we've got one plus two which is three and then we go one over three. So one third and two thirds. Right. That's how much of the space that each column will want to reserve. So because we have 600 pixels here one third of 600 is 200 hundred and two thirds of 600 is 400. And that's why you get a column that's 200 pixels wide and 400 pixels wide. Okay. That's how we calculate it. Now we'll do another similar one this time we'll go one to three so grid template columns 1 IFR 3 afar and when I say this one now we're dealing with one plus three which is four. So it's a quarter and three quarters so a quarter of 600 is 150. And three quarters of 600 is well three times 150 which is 450. So if I come over and check that out in the window we can see that we have the first column which is 150 pixels wide. And the second column is 450 pixels wide go. Now obviously because we're using racial logic we don't always have to use a one to something we can use you know two to four three to two whatever. So I'm going to quickly show that so in your grid template columns and we go too far and for ever just like say if we save this this is is essentially the same as when we used one far too far because if we now our ratio of logic to if and for afar can be represented as one if I and to offer. So the result of this will be that the first column still two hundred pixels 1 and the second column will be 400 pixels wide. OK. Because if you think about it is to over 6 and 4 overseas and to over 6 is essentially a third and for over 6 is essentially two thirds. So let's say you get that. Now obviously outside of using just fraction based columns we can combine them with fixed sized columns like size so we can say we want the first column to be 100 pixels inside the second column to be a fraction. Right. And when we do this. What are you going to see is that the fraction part of it acts like all I did. So we got out 100 pixel wide column there and then we've got 500 pixels left for the second column. Similar to what order does in that regard. Next one we've got the same example essentially but we're using percentages. So I agreed to imply columns this time go 20 percent and one in five and 20 percent of 600 is 120. I just know that on my head. So if I come down and check that we can come to here and see that the first column is 120 says 20 percent of six hundred and then basically the four editors at the remaining space then you do this for the viewport units. You can do this for the font size in units and all the other examples we've seen. I'm just showing you a pixel based on a percentage based column next to a fraction column. But just know it's available for also all of these are available for row as well. I'll just simplify it but sticking the columns now we can also have to fraction columns combined with a fixed column and how things are calculated can be a little bit different there. So finally I go to imply columns say 100 pixels again and I got one f r but then I go too far right. What's going to happen here is that we have one column that's allocated 100 pixels of the 600. So therefore we've got 500 pixels left over. And that 400 pixels is then divided into these two columns. But keep in mind that the second column requires more space than the first one. So how you would do this is that you would go. Okay we're taking them 100 away from 600 so we've got 500. Then you guy. All right we got three so 500 divide by three is roughly 166 I think. Right. So you go one times 166. So the second column in this case would be 166. And the second one the last one sorry would be twice the size of the second one. So one sixty six times two. It's roughly about 3 3 3. Okay. So finally I say this. We can verify that if I scroll down we say we'll go in three columns. And if I hover over you'll see the first one is 100. We asked it to be the second one is in fact that one six six point six six. But you get the point and then the last one is 3 3 3 3 3. So on so forth. But it was calculated for us on the fly. We didn't have to use percentages to do this. And that's the factor here is that we can do this without having to ever use percentages so that's that example. Now for the last example I just want to quickly point out something that may not be obvious to you when you first play around with this and that is what happens if we just have one fixed column and then a fraction column. So we've seen this example array just like that. So if I say this and come down you'll say you've got your one fixed column and then you've got your float column what that. OK. Which is the fraction. However if I change this to like one hundred or thousand or anything of that nature it doesn't really have an impact. It doesn't have an impact because there's no other columns that it needs to calculate the remaining space against. Because we already know that that's fixed. So therefore it gets. Okay. Well I'll just go as big as possible. Right. So that's the thing just to understand there that this when there's one column with a fraction it can be a V it wants to be because at the end of the day it's going to just try and grow it because it can. All right. That's all I want to cover in this video and I'll see you all in the next one.