The CSS Grid Layout Module was shipped with a new CSS unit called the fr unit. As straightforward as it can be, fr is the abbreviation of the word “fraction”. The new unit makes it possible to quickly slice the grid up into proportional columns or rows. As a result, the creation of fully responsive and flexible grids becomes almost a breeze.
It was once tables, then margins and floats, then flexbox and now grid: CSS always steered towards new…Read more
As the fraction unit was introduced together with the Grid Layout module, you can use it in any browser that supports the CSS grid. If you also want to support older browsers here’s a great CSS grid polyfill that allows you to use not only the fr unit but other grid features as well.
First, let’s have a look at a basic grid that uses the fraction unit. The layout below divides the space into three equal-width columns and two equal-height rows.
The belonging HTML is made of six divs marked with the .box class, inside a .wrapper div.
To use the Grid Layout module, you need to add the display: grid; CSS property to the wrapper. The grid-template-columns property uses the fr unit as value; the ratio of the three columns is 1:1:1.
For the grid rows (grid-template-rows property), I didn’t use the fr unit, as it only makes sense if the wrapper has a fixed height. Otherwise, it can have strange results on some devices, however, even then, the fr unit does maintain the ratio (and this is huge).
The grid-gap property adds a 10px grid in-between the boxes. If you don’t want any gap just remove this property.
Note the CSS above doesn’t contain some basic styling such as background colors. You can find the full code in the demo at the end of the article.
Of course, you can’t only use 1:1:1 but any ratio you want. Below, I used 1:2:1 fractions that also divide the space into three columns but the middle column will be twice as wide as the other two.
I also increased the value of grid-gap so that you can see how it changes the layout. Basically, the browser deducts the grid gap from the viewport width (in this example, the grid gaps add up to 80px), and slices up the rest according to the given fractions.
You can combine the fr unit with any other CSS units as well. For instance, in the example below, I used the 60% 1fr 2fr ratio for my grid.
So, how does this work? The browser assigns the 60% of the viewport width to the first column. Then, it divides the rest of the space into 1:2 fractions.
The same thing could also be written as 60% 13.33333% 26.66667%. But frankly, why would anyone want to use that format? A huge advantage of fraction unit is that it improves code readability. Moreover, it’s completely accurate, as the percentage format still adds up only to 99.9999%.
Apart from percentages, you can also use other CSS units together with the fraction unit, for instance pt, px, em, and rem.
Add whitespace with fr
What if you don’t want your design to be cluttered and add some whitespace to your grid? The fraction unit also has an easy solution for that.
As you can see, this grid has an empty column while it still retains all the six boxes. For this layout, we need to slice the space up into four columns instead of three. So, we use the 1fr 1fr 1fr 1fr value for the grid-template-columns property.
We add the empty column inside the grid-template-areas property, using the dot notation. Basically, this property allows you to reference named grid areas. And, you can name grid areas with the grid-area property that you need to use separately for each area.
The whitespace areas don’t necessarily have to form a column, they can be anywhere in the grid.
The repeat() function
You can also use the fr unit together with the repeat() function for a simpler syntax. , this is not necessary if you only have a simple grid but can come in handy when you want to implement a complicated layout, for instance a nested grid.
The repeat(3, 1fr) syntax results in the same layout as 1fr 1fr 1fr. The layout below is the same as the first example.
If you increase the multiplier inside the repeat() function you will have more columns. For instance, repeat(6, 1fr) results in six equal columns. In this case, all our boxes will be in the same row, which means it’s enough to use only one value (200px) for the grid-template-rows property.