Skip to main content

What does the fr unit mean?

CSSJunior~1 min read
Suggest an edit

fr (fraction) is a fraction of the free space in CSS Grid. It is not equal to pixels or percentages: it is a unit that divides the remaining space in the container between columns or rows.

Example:

css
grid-template-columns: 1fr 2fr 1fr;

Here the grid divides the free space into 4 fractions:

  • the first column: 1/4
  • the second: 2/4
  • the third: 1/4

Important: fr only accounts for what remains after subtracting fixed sizes (px, %, auto, min-content, etc.).

Summary: fr is a flexible proportional unit for distributing free space in Grid.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit
What does the fr unit mean?: CSS Interview Question