What Is the CSS fr Unit in Grid Layout?

The CSS fr unit represents a fractional share of the available free space within a CSS Grid container. Introduced specifically with the CSS Grid specification, it allows developers to create flexible, responsive grid tracks without manually calculating pixel widths or percentage values. By distributing whatever space remains after accounting for fixed tracks, content sizes, and gutter gaps, the fr unit simplifies complex responsive layouts and prevents horizontal overflow issues common in traditional styling.

Understanding Free Space Distribution

The primary function of the fr unit is to divide unused space proportionally among grid rows or columns. Unlike fixed units such as pixels (px) or relative units like percentages (%), an fr track size does not compute from the entire container width directly. Instead, the browser engine follows a specific calculation flow:

1. Determine the total size of the grid container.
2. Subtract the dimensions of all non-flexible tracks (such as px, em, or auto).
3. Subtract any spacing defined by column-gap, row-gap, or the shorthand gap property.
4. Divide the remaining "free space" among all tracks assigned an fr unit according to their numerical weight.

For example, consider the following column definition:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

In this layout, the browser deducts the two 20px gaps from the container's width. It then divides the remaining space into four equal fractions (1 + 2 + 1 = 4). The first and third columns receive one-fourth of that free space, while the middle column receives two-fourths (half).

The Difference Between fr and Percentages

Percentages in layouts are calculated strictly against the parent container's total size, which often causes layout bugs when combined with fixed gaps. If a container defines three columns as width: 33.33% and adds a 20px gap, the total calculated width exceeds 100%, causing grid items to overflow or wrap unexpectedly.

The fr unit eliminates this calculation overhead because it automatically accounts for gap declarations before allocating space:

/* Percentages: Prone to overflow unless paired with calc() */
grid-template-columns: 33.33% 33.33% 33.33%; 

/* Fractional units: Perfectly sized regardless of gap values */
grid-template-columns: 1fr 1fr 1fr; 

Mixing fr with Fixed and Relative Units

One of the strongest capabilities of the fr unit is its ability to blend seamlessly with other CSS units. A common interface pattern is a layout with a fixed-width sidebar and an expanding main content area:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
}

Here, the sidebar remains exactly 260 pixels wide, while the main content area expands or contracts to occupy all remaining width across different viewport sizes.

Handling Content Overflow with minmax()

By default, an fr unit has an implicit minimum size of auto (minmax(auto, 1fr)). This means that if an element inside an fr column contains unbreakable content—such as a long URL, code snippet, or wide image—the track will expand past its allocated fraction to accommodate the content, potentially breaking the grid.

To ensure tracks shrink properly and force child elements to truncate or wrap, developers often set an explicit zero minimum:

.grid-item {
  /* Prevents tracks from blowing out past their fractional share */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

By leveraging the fr unit, web developers achieve robust, fluid layouts that adapt dynamically to any screen dimension without relying on rigid math or fragile percentage hacks.