The fr unit and the CSS grid layout

No more tables, no more positioning, no inline-blocks, no more floats or flexbox layout tools – the CSS grid layout is here. A beautiful module that helps us create a grid-based layout system through rows and columns. And this is not all – with the grid layout the fr CSS length unit came, too, and when you work with a CSS grid, you’ll be probably using lots of fr units, too.

What is a fr unit?

The fr unit stands for a fractional unit, which basically means a “fragment or part of the available or remaining space”. 1fr represents one part or one fragment of the remaining space, 2fr stands for two fragments and so on. The fr unit is calculated automatically and the calculation is based on the layout divisions when the system adjusts for a number of tracks and gaps inside the grid. This is the reason, the fr unit is much more friendly for the end-user because, for example, you don’t have to worry about the gaps between the tracks.
A very simplified example explains exactly this problem – a grid with 2 columns, where the first column takes 1 fraction of the space and the second column three fractions, so basically we have four fractions of space available to form two columns (1fr + 3 fr):

grid-template-columns: 1fr 3fr;

This example very loosely says one column will take 25% of the space and the second will take about 75%. However, if you compare fr units to % units, the fr units are much more flexible. When working with %, we forgot to define the padding between those columns (let’s say it’s only 10 px), so when calculating again, we’ve broken that 100% width and caused an overflow problem which will probably cause a horizontal scroll. Great, right? 🙁

So, compared to percentages, the fr units work much more friendly for the end-user. And you’ve guessed it, you can use fr units in combination with other either absolute or relative units.

A few examples that present fr units at work

Using exclusively fr units in one property

The example below presents a simple grid layout where we defined 4 columns with fr units where all columns take up the same amount of space (each column 1 fr unit). We also defined 3 rows with pixels. Additionally, we defined a grid template with the grid-area property by referencing the names of the grid areas and defining empty grid cells with the dot.

.my-grid-container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr; /*we could use a function repeat(4, 1fr); because we have four repeating values*/
  grid-template-rows: 300px 200px 100px;

  grid-template-areas:
        "header . header1 header2"
        "content .  content1 content2"
        "resources resources resources resources";
}

Using fr units in combination with other units in one property

If you want to learn more about CSS units and what is the difference between PX, EM, REM, %, VW, VH and FR, the article in the link is a great 5-minute read. However, in this showcase, we will present the same code as above, but we will mix fr units with pixels and percentages, to make it more interesting:

.my-grid-container {
  display: grid;

  grid-template-columns: 30px 15% 1fr 1fr;
  grid-template-rows: 300px 200px 100px;

  grid-template-areas:
        "header . header1 header2"
        "content .  content1 content2"
        "footer footer footer footer";
}

Do you notice the change in the layout? As you can see, you can apply fr with other units, however, the values belonging to fr units will be split up between the space that’s left after taking away the values that are defined by other units – so, for the example above – first taking away pixels and percentages and then splitting up the remaining space between 2 fractions of the remaining space. Super simple, yes?