Skip to content
The CSS Chamber of Measures

/static/camara/en/unidade/fr/

Menu

CSS-021 · Grid and fraction

fr

A fraction of the leftover space — the unit that only exists in grid.

One fr is a fraction of the grid's free space: once everything with a rigid size is served, what remains is divided in proportion to the declared frs. It is not a length — it is the <flex> type, which is why it enters neither calc() nor any property outside the grid templates.

It is the right choice whenever the question is “in what proportion do we split the rest?”: 1fr 2fr 1fr is a center column twice its neighbors, with no percentages and no gutter arithmetic. A scale-room detail: 1fr is equivalent to minmax(auto, 1fr) — wide content can still stretch the column.

1fr
2fr
1fr
.galeria {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
Live demonstration: the free space dealt into four shares — one, two, one.