CSS fr Unit

fr stands for fraction. It only works in CSS Grid, and it means “a share of the space that is left over”.

1
2
3
4
5
6
7
8
9

<style>
  .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8px; }
  .grid div { background: #d0e8f2; padding: 12px; border: 1px solid #1a5276; }
</style>
<div class="grid">
  <div>1fr</div>
  <div>2fr</div>
  <div>1fr</div>
</div>

The total is 4 fractions. The middle column gets 2 of the 4 shares (half the width), and the outer columns get one share each.

Why fr is better than percentages here

Percentages ignore the gap. Three columns of 33.3% plus gaps are wider than the container. fr units are calculated after the gaps and fixed sizes are taken out, so everything always fits.

1
2

/* a fixed sidebar and a flexible main area */
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }

The sidebar is 240px and 1fr takes everything that remains.

A small trap: minimum content size

1fr is really minmax(auto, 1fr). A column cannot shrink smaller than its content, so a long word or wide image can force the column wider and break the grid. When that happens, use minmax(0, 1fr).

You will meet the grid in detail in CSS Grid and repeat() and minmax().