What is the fr unit in CSS Grid?

fr ("fraction") represents one share of the space left over in the grid after fixed-size tracks are accounted for.

It's Grid's way of saying "divide up whatever room remains." If you write 1fr 2fr 1fr, the leftover space is split into 1 + 2 + 1 = 4 shares, so the columns take a quarter, a half, and a quarter:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* → 25% / 50% / 25% of the available space */
}

The crucial word is available: fixed tracks are subtracted first, then fr units divide what's left.

grid-template-columns: 200px 1fr 1fr;
/* 200px is carved out first, then the rest is split 50/50 */

Why fr beats plain percentages: fr automatically accounts for fixed columns and for any gaps you've added, so the tracks always add up correctly. Percentages don't know about gaps, so a 25% × 4 layout with gaps overflows — a classic bug fr simply avoids.