CSS units · CSS Grid tracks only
fr
The fr unit distributes free space in a CSS grid track.
Key facts
| Context | CSS Grid tracks only |
|---|---|
| Meaning | Fraction of free space |
| Free space | After fixed tracks and gaps |
| Minimum | Auto minimum unless minmax(0, 1fr) |
| Not a length | Cannot be used outside grid |
| Standard | CSS Grid Layout |
Fractions of what is left
1fr means one share of the free space in the grid container after fixed-size tracks and gaps are accounted for. Two tracks with 1fr and 2fr split that space in a one-to-two ratio. Unlike percentages, fr does not include gaps in its base calculation.
An fr track has an automatic minimum based on its content. A long unbreakable word can therefore make a track wider than its fraction, which is why layouts sometimes overflow despite the fractions.
Controlling the minimum
Use minmax(0, 1fr) when a track should be allowed to shrink below its content size, for example around a table or a long code line. Then apply overflow: auto or min-width: 0 to the child so it can actually shrink.
fr is not a general length. It cannot be used for padding, margin or font size; those need a real length or a percentage.
Frequently asked questions
Does 1fr equal 1%?
No. fr divides the remaining space after fixed tracks and gaps; percentages resolve against the container size.
Why is my grid track overflowing?
The automatic minimum size of the content. Use minmax(0, 1fr) and allow the child to shrink.