A grid often mixes fixed size columns, a sidebar for example, with columns that need to share whatever space is left. That is exactly the problem the fr unit solves: it is not an absolute size like a pixel, it represents a fraction of the remaining space inside the grid container.
The name fr comes from fraction. A value like grid-template-columns: 1fr 2fr splits the remaining space into three equal parts, and gives two of those parts to the second column. It is a unit unique to CSS Grid, it does not exist anywhere else in CSS.
Definition
fr is a CSS units unit reserved for Grid, representing a fraction of the space available in the container, once fixed size columns and the gaps between columns have already been subtracted from that calculation. A 1fr column grows and shrinks with the container's size, unlike a pixel column, which stays fixed.
Syntax and how the split is calculated
.grid {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}On a 1000 pixel container, the first column takes its fixed 200 pixels. That leaves 800 pixels to split between the next two columns, in proportion to their fr values: the second column, with 1fr out of a total of 3fr, gets a third of 800, about 267 pixels. The third, with 2fr, gets double that, about 533 pixels.
fr versus percentage: a difference that matters
| Unit | Basis for the calculation |
|---|---|
% | Percentage of the container's total width |
fr | Fraction of the remaining space, gap and fixed columns already subtracted |
A percentage is always calculated against the container's total width, without accounting for the other columns or the spacing between them. The fr unit accounts for that spacing, the gap, and the fixed columns before splitting what remains, which avoids the overflow a clumsy mix of percentages and pixels can produce when their sum goes past 100%.
fr, on the other hand, never overflows: fr always settles for whatever is left, even if that leftover drops to zero.fr and gap in the same calculation
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}On a 1000 pixel container with three equal columns and 20 pixels of spacing between them, the two gaps first remove 40 pixels in total, leaving 960 pixels to split into three equal parts of 320 pixels each. The fr unit performs this calculation automatically every time the container resizes, with no formula to write by hand.
This built-in calculation is what truly sets fr apart from a plain percentage divided mentally by the number of columns: as soon as a gap or a fixed column joins the mix, a hand calculated percentage quickly becomes wrong, while fr always stays exact.
fr and content that cannot shrink
An fr column can still end up wider than planned if its content cannot shrink any further, a long URL with no spaces for example, or an image with a fixed minimum width. In that case, the incompressible content takes priority over the theoretical fraction split, and the other columns adjust accordingly.
Frequently asked questions
fr outside of a CSS grid?No, the fr unit only makes sense inside the grid-template-columns and grid-template-rows properties of a grid. Using it anywhere else, on a regular width for example, has no effect recognized by browsers.
1fr always equal the same width in pixels?No, its pixel value depends entirely on the remaining space to split, which changes with the container's size, the number of other fixed columns, and whether a gap is present. That is exactly what makes fr useful for fluid grids, without having to recalculate a width every time the screen size changes.
fr?By giving different values to each column, as in repeat() and minmax() or a manual declaration like 1fr 2fr 1fr. The ratio between the values determines the split: a 2fr column always receives twice as much as a 1fr column, no matter the total width available.