CSS Grid Fr Unit Explained

CSS Grid introduced a new measurement unit to the world. It’s actually a new type of flexible unit called Fr unit. The meaning of Fr is Fractional Unit, where 1fr represents a fraction of the available space within a grid container.

Below are two examples demonstrating the use of the fr unit. Before diving in, it’s important to note that the grid items in these examples are positioned using the grid areas property as follows:

.grid-wrap {
    max-width: 100%;
    margin: 3em auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px 150px 50px;
    grid-template-areas: "head head2 . side" "main main2 . side" "footer footer footer footer";
}

Each of the four columns occupies the same width (space) in the grid.

Examples of Using fr

Here’s a similar example as before, but with different fr values. Notice how the layout adjusts accordingly:

.grid-wrap {
    /* ... */
  
    grid-template-columns: 1fr 1fr 40px 20%;
    grid-template-rows: 100px 200px 100px;

    / * ... */
}

In the final example, the sidebar occupies 2fr of the space, meaning its width will match the combined width of the elements in the first and second columns.

.grid-wrap {
    /* ... */
  
    grid-template-columns: 1fr 1fr 40px 2fr;
    grid-template-rows: 100px 200px 100px;
  
    /* ... */
}

Mixed Units

As demonstrated in the previous examples, you can mix different unit types in a grid layout. This means you can simultaneously use percentage, fixed (px), and fr values. The fr values represent fractions of the remaining space after the fixed and percentage values have been allocated.

For instance, if you define a grid with 4 columns as shown in the snippet below, the first column will have a fixed width of 300px, the second column will be 80px (10% of an 800px container), and the third and fourth columns will each take up 210px, which is half of the remaining space:

main {
  width: 800px;
  display: grid;
  grid-template-columns: 300px 10% 1fr 1fr;
  /* 300px 80px 210px 210px */

  grid-template-rows: auto;
}

Summary

The fr unit in CSS Grid is a powerful tool for creating flexible and responsive layouts. By understanding how to combine fr values with fixed and percentage units, you can optimize the distribution of space in your grid layouts. This ensures both consistency and adaptability across different screen sizes.

Whether you’re building complex designs or simple grids, the ability to mix and match units gives you complete control over your layout. With practical applications like those demonstrated in this post, you can enhance both functionality and aesthetics in your web projects.

This post is inspired from the following alligator.io post.