Guide to CSS Grid Layout Fr Unit

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.

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.

Read Also:  Introduction to the CSS Grid Layout Module

Basic usage

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.

<div class="wrapper">
  <div class="box box-1">1.</div>
  <div class="box box-2">2.</div>
  <div class="box box-3">3.</div>
  <div class="box box-4">4.</div>
  <div class="box box-5">5.</div>
  <div class="box box-6">6.</div>
</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.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}
.box {
  color: white;
  text-align: center;
  font-size: 30px;
  padding: 25px;
}

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.

Change ratio

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.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 40px;
}

Combine fr with other CSS units

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%.

.wrapper {
  display: grid;
  grid-template-columns: 60% 1fr 2fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
}

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.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  grid-template-areas:
    "box-1 box-2 . box-3"
    "box-4 box-5 . box-6";
}
.box-1 {
  grid-area: box-1;
}
.box-2 {
  grid-area: box-2;
}
.box-3 {
  grid-area: box-3;
}
.box-4 {
  grid-area: box-4;
}
.box-5 {
  grid-area: box-5;
}
.box-6 {
 grid-area: box-6;
}

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.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-rows: 200px;
  grid-gap: 10px;
}

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.

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

You can use repeat() more than once. For instance, the following example results in a grid in which the last three columns are twice as wide as the first three.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
  grid-template-rows: 200px;
  grid-gap: 10px;
}

You can also combine repeat() with other CSS units. For instance, you could use 200px repeat(4, 1fr) 200px as a valid code.

If you are interested in how to create complex layouts with the CSS Grid module, the repeat() function and the fr unit Rachel Andrew has an interesting blog post on how you can do that.

A demo for experimenting

Finally, here’s the demo I promised. It uses the same code as the first example in this article. Fork it, and see what you can achieve with the fr unit.

Read Also:  How to Integrate Simple CSS Grid Layouts into WordPress