UI Development, Uncategorized

“Fr” – the fraction unit

Introduction

With the popularity of CSS Grids, it demanded a much flexible unit. So, a new CSS length unit – “fr” gets introduced by the CSS Grid Layout. It stands for “fraction” and 1fr unit in a grid container represents a portion of the available space in it.

Before moving ahead, you might want to learn a bit more about the CSS Grid layout here: https://labs.tadigital.com/index.php/2019/04/05/all-you-need-to-know-about-css-grid-layout/

In the simplest form, the syntax for this new unit may look like this:

grid-template-rows: 1fr 1fr 1fr;

Let us consider a scenario for better understanding:

We have a block of width 300px and height 150px, and we want to slice it into three parts of 2fr, 1fr, and 1fr respectively.

So, the first part of my div will be double the width of the other two parts. The first part becomes 150px and the remaining two parts become 75px each. Now, let’s see how fr calculates the width of each sub-div(item):

Added fr = 2fr + 1fr + 1fr = 4fr
sub-div 1 = 2fr/4fr*300px = 150px
sub-div 2 = 1fr/4fr*300px = 75px
sub-div 3 = 1fr/4fr*300px = 75px

Note: Let us keep in mind that “fr” accepts not only “whole numbers” but also “decimal numbers”.

Difference between using percentages and “fr” inside the grid container

Consider the above example but with  grid-gap: 20px;

Fr unit works based on available space. It will calculate the proportion by subtracting the grid gap from the total width.

grid-template-columns: 2fr 1fr 1fr; 
grid-gap: 20px;

New width = 300-(2*20) = 260px
sub-div 1 = 2fr/4fr*260px = 130px
sub-div 2 = 1fr/4fr*260px = 65px
sub-div 3 = 1fr/4fr*260px = 65px

Percentages are length units and not flex units. So, without ignoring the grid-gaps, the width of the column is calculated. With the addition of these grid-gaps, the content is forced to move outside the container. This causes a horizontal scroll leading to a non-responsive user-experience. (as shown below)

grid-template-columns: 50% 25% 25%;
grid-gap: 20px;

To avoid this, we need to subtract the grid-gap from the columns. Hence, calc(). This function can be used to define the column widths.

grid-template-columns: 50% calc(25%-20px) calc(25%-20px);
grid-gap: 20px;

sub-div 1 = 50%; = 150px
sub-div 2 = calc(25% - 20px) = 55px
sub-div 3 = calc(25% - 20px) = 55px

Mixing units

The fr unit can work together with other CSS units like “px”, ”pt”, ”%”, “em”, “rem” etc.

Let us take an example. Here I’m using the ratio 50% 1fr 2fr for the grid columns.

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

First, the browser will divide the total space into 50% first and then divide the other half into 1:2 ratio.
This can also be written as grid-template-columns: 50% 16.6667% 33.3333%;

Clearly, using the fr unit improves readability.

Scope of the “fr” unit

Fr units work only inside a grid container. It is applicable only to the direct children of the grid container. Talking about responsiveness, it behaves uniformly for all the screens as it works based on available space.

Compatibility

It supports mostly all modern browsers.

But there still might be browsers which are shipped without the full support for “display: grid;”

Luckily, the browsers are smart enough to ignore any CSS feature/value which it does not understand. It simply skips it and implements the next thing it understands.

In the most basic form, testing for support can be done using @support and writing the properties/value inside it. On the contrary, we can also test for “No-Support”

@supports not (display: grid) {
    .item {
       /* CSS for browsers not supporting grid layout */    
    }
}

While Edge has been recently updated to support the modern grid layout, IE10 and IE11 still support this feature partially. Hence, as a fallback, a -ms prefix must be used for these browsers.

.wrapper {
     display: grid;
     display: -ms-grid;
}
.item {
    grid-row: 1;
    -ms-grid-row: 1;
    grid-column: 1 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
}

The browser support can be checked here.

About The Author