The FR Unit

fr (fraction) is a unit exclusive to CSS Grid. It represents a fraction of the available free space in the grid container — after fixed-size tracks are accounted for.

frgrid-template-columnsgrid-template-rows

1. What is 1fr?

1fr means 'take 1 share of the remaining space'. If you have 3 columns all set to 1fr, they share the space equally — each gets 1/3.

Live Demo

1fr (33%)

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* each column = 1/3 of available width */
}

2. Unequal FR Values

Different fr values create proportional columns. 2fr gets twice as much space as 1fr. Think of it like dividing a pie: 1fr 2fr 1fr divides the space into 4 equal parts, then gives 1, 2, and 1 parts.

Live Demo

1fr

2fr

1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* total = 4 parts: col1=25%, col2=50%, col3=25% */
}

💡 fr units always fill all available space. The total shares add up: 1+2+1=4, so each fr = 25% of the available width.

3. fr Mixed with Fixed Units

When you mix fr with fixed units (px, em, %), the fixed tracks are sized first. The remaining space is then distributed among fr tracks. This is the key power of fr.

Live Demo

150px (fixed)

1fr (remaining ÷ 3)

2fr (remaining × 2/3)

CSS

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  /* 1. reserve 150px for col 1 */
  /* 2. divide rest: col2=1/3, col3=2/3 */
}

4. fr vs Percentages

Percentages are calculated from the container width including gap space, so gap can cause overflow. FR units are calculated from the free space AFTER gaps, so they never overflow.

Live Demo

% columns: often causes overflow with gap!

33%

fr columns: gap-aware, never overflows

1fr

CSS

/* ❌ Percentage — gap causes overflow */
.bad {
  grid-template-columns: 33% 33% 33%;
  gap: 8px; /* 99% + 16px > 100% */
}

/* ✅ FR — gap-aware, never overflows */
.good {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; /* fr takes remaining space */
}

💡 Prefer fr over % for flexible tracks. fr units automatically account for gap and fixed-size tracks.

5. FR for Row Tracks

fr works for rows too — but only when the grid container has an explicit height. Otherwise rows have no free space to distribute.

Live Demo

1fr

2fr

1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  height: 200px; /* required for fr rows! */
}

💡 Row fr units require the container to have an explicit height. Without a height, rows have no free space to distribute.