The fr unit in Grid: a fraction of remaining space

Fr stands for fraction, not fragment. In Grid track sizing, it represents a share of remaining available space. It is not a general unit that sets an ordinary child width to a fraction of its parent.

Divide remaining space in a 1:2 ratio

The first track is 60px and the two gaps are 10px each. The 1fr and 2fr tracks share the remaining space, with the latter receiving twice as much subject to sizing constraints.

<div class="grid">
  <p>60px</p>
  <p>1fr</p>
  <p>2fr</p>
</div>

.grid {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
}
p {
  margin: 0;
  background: #dbeafe;
  padding: 0.5rem;
  overflow-wrap: anywhere;
}

Calculate the share

In a 400px-wide content box, the fixed track and two gaps leave 320px. The three fraction units divide that remainder into about 106.67px and 213.33px. A lone 2fr track does not mean “200px of a 400px parent”; its share depends on the other tracks and constraints.

Why 1fr can still overflow

A bare 1fr track has an automatic minimum that may honor content’s intrinsic minimum size. A long unbreakable token can keep it wider than expected. Minmax(0,1fr) lets the track shrink below that automatic minimum, but the content still needs an appropriate wrapping or overflow choice. These are separate decisions.

Fractions below 1 can leave unfilled space when their total is below 1, and indefinite container sizing follows additional intrinsic-sizing rules. Start with a definite, small layout when learning the distribution.

Use fr in grid-template-columns/rows or other Grid track definitions, not width:1fr. Learn grid-template-columns, gap, and overflow-wrap.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.