CSS Grid Fr Unit Explained

CSS Grid introduced a flexible unit called fr (fractional unit). 1fr represents one fraction of the available space in a grid container.

If you’ve worked with percentages or px for column widths, the fr unit feels similar but handles remaining space automatically – no manual calculations needed.

The grid items in the examples below are positioned using the grid areas property:

.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 grid, but with different fr values. Notice how the column widths adjust:

.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. Its width matches the combined width of the first and second columns.

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

Mixed Units

You can mix fr with other unit types in the same declaration – percentages, fixed px values, or auto. The browser allocates fixed and percentage tracks first, then distributes the remaining space among the fr tracks.

Take this 4-column grid on an 800px container. The first column is a fixed 300px, the second is 10% (80px), and the remaining 420px splits equally between two 1fr columns – 210px each:

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

  grid-template-rows: auto;
}

fr vs auto

The auto keyword sizes a column to fit its content. The fr unit distributes remaining space regardless of content size.

When you combine them, auto columns shrink-wrap their content first, then fr columns split whatever is left:

grid-template-columns: auto 1fr auto;
/* sidebar | flexible main | sidebar */

This is a common pattern for page layouts where sidebars should be as wide as their content, and the main area fills the rest. It also works nicely with the aspect-ratio property for grid cards that maintain proportions.

fr with repeat() and minmax()

The fr unit pairs well with responsive grid patterns that avoid media queries. Using repeat() with minmax() creates grids that automatically wrap items to the next row:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Each column is at least 250px wide. When there’s extra space, the 1fr maximum distributes it evenly across columns.

As the viewport shrinks, columns drop to a new row instead of getting squeezed below 250px. If you care about rendering speed, check my post on CSS Grid and web performance.

The difference between auto-fill and auto-fit: auto-fill keeps empty tracks when space is available, while auto-fit collapses them so existing items stretch to fill the row.

Common Pitfalls

fr doesn’t work outside Grid. Unlike % or px, the fr unit only applies to grid-template-columns and grid-template-rows. Using it in width, margin, or Flexbox properties has no effect.

Overflow with large content. An fr column can grow beyond its calculated fraction if its content doesn’t fit. To prevent this, use minmax(0, 1fr) instead of 1fr:

/* Default: fr uses content size as minimum */
grid-template-columns: 1fr 1fr;

/* Force minimum to 0 - content will overflow instead of expanding */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

Gaps eat into fr space. The gap property is deducted before fr values are calculated. A 3-column 1fr 1fr 1fr grid with a 20px gap actually gives each column (total - 40px) / 3, not total / 3.

FAQs

Summary

I use the fr unit in almost every grid I build. It removes the guesswork of calculating percentages and adapts naturally when you add or remove columns. Mixed with px, auto, and minmax(), it covers most layout needs without a single media query.

If you’re getting started with Grid, the complete guide covers the full picture – tracks, placement, alignment, and more.