CSS: introduction to the unit of length 'fr'

Original author: Robin Rendle
  • Transfer


While everyone is actively sharing their impressions of CSS grids, I have not heard anyone say as much about the new unit of length in CSS - fr (see specification ). And now that browsers are starting to support it better and better, I think it's time to take a look at how it can be used in conjunction with this layout technique, as it gives us a number of advantages. The main ones are code that is more understandable and convenient to maintain.

Before we get started, let's see how we usually create grids in CSS. In the example below, we create a grid of four columns with the same width:

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>


.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}


If you've never used the repeat () function as the value of the grid-template-columns property , let me introduce you to one of the most elegant CSS grid features! This is a short entry. In essence, it allows us to more closely describe repeated values. Instead, we could write grid-template-columns: 25% 25% 25% 25%; but it’s more convenient to use repeat () , especially when you define the width through a rather long minmax () expression .

The syntax is as follows:

repeat (the number of columns / rows, the column width we need);

But, in fact, there are a couple of problems.

First, to use this CSS function, we needed to do a little calculation. We had to calculate how much we will get if the total grid width (100%) is divided by the desired number of columns (4). We got 25%. In this example, the calculation is quite simple and does not create problems, but in more complex examples, we can completely avoid the need to calculate something and let the browser do it for us. We have a calc () function , so we could write the following: repeat (4, calc (100% / 4) , but even this is a little strange, and in any case there is another problem ...

The second problem is related to overflow. Since we set the width of each column to 25% and set grid-column-gapat 10px, the whole grid becomes 100% wider. You do not expect this by typing the above code, but that is how percentage values ​​work. In fact, here we are saying: “you need to set the value of each column to 25% of the width of the viewport and the distance of 10px between them.” This is not much different from our expectations, but causes a big problem with layout.

Inadvertently, we created a horizontal scroll:


And this is where the fr unit will help us .

The fr unit ("fractional part") can be used to create grids in the same way as any other unit of length in CSS, like % , px or em . Let's edit our code and try to set a new value:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}


The result will be the same as in the previous example, since in this case we give each of the four columns a width equal to one fractional part (which is 1/4 or 25%). But! We got rid of overflow on the x axis, because if we determine for each column a width equal to 1fr , these 10px are automatically taken into account and subtracted from the final column width.

You are probably wondering why the hell you need to learn to use this new CSS unit if you can get by with percentages or pixels? Well, let's look at a more sophisticated CSS grid example and find out why using frthis is still the best option. In the new example, suppose we want a grid of twelve columns to be located on the left after the navigation block, which would look like this:



This is a fairly typical practice for many UIs. Using fr in such cases eliminates the need to create a separate grid or to mess with calc via calc () . After all, if we had not resorted to fr in the above example, we would have to perform the following calculation: the

width of each column = ((the width of the visible area is the width of the navigation bar) / number of columns) * 1%

This, of course, could have been cranked up, but it's hard to even look at it without tears. In addition, if we needed to change the width of the navigation block, we would have to carry out a similar calculation again. Instead, fr offers us an extremely pleasing to the eye and the most understandable code:

.grid {
  display: grid;
  grid-template-columns: 250pxrepeat(12, 1fr);
  grid-column-gap: 10px;
}



Here we give the first column a fixed width in pixels, and then create another 12 separate columns. For each of them, the width is determined in one "fractional part of free space" (the literal wording in the specification). But now there is no need for crazy calculations! The code is fairly clear, and if we change the width of the left navigation block, the width of the columns on the right will be automatically adjusted.

We did not have to spend a lot of effort and time to make our interface more convenient to maintain. We also made our code more understandable for future developers who are still waiting for a lot of other work.

What are our colleagues sharing


A good result can be achieved using fr along with other units of length. Imagine a fixed sidebar and a main content area that occupies the rest of the space: grid-template-columns: 200px 1fr; . Easy!

Here is a good example of using multiple units with Alligator.io:
.container {
/* ... */grid-template-columns: 1fr 1fr 40px2fr;
grid-template-rows: 100px200px100px;
/* ... */ 
}



Rachel Andrew shares a video about fr unit :



Anna Monus offers a wonderful article about this unit:

“You can use the fr unit also with other CSS length units. In the example below, I used the ratio of 60% 1fr 2fr for my grid . "



Long live the fr unit !
Tags:

Also popular now: