The fr unit: fractional space

fr = a unit that means "share of available space"

grid-template-columns: 1fr 1fr;          /* two equal columns */
grid-template-columns: 1fr 2fr;          /* second column is 2x first */
grid-template-columns: 1fr 1fr 1fr 1fr;  /* four equal columns */
grid-template-columns: repeat(4, 1fr);   /* same — shorthand */

After fixed-pixel tracks reserve their space, fr units split what's left. So:

grid-template-columns: 200px 1fr 1fr;

With a 1000px container: 200px goes to col 1. The remaining 800px splits into two 400px columns.

fr beats % when you have gaps

Compare:

/* % math: each col is 50% — but gap is INSIDE the container, so children overflow */
grid-template-columns: 50% 50%;
gap: 16px;

/* fr math: 1fr accounts for the gap. Container width = col1 + gap + col2 */
grid-template-columns: 1fr 1fr;
gap: 16px;

With %, the math is wrong when gaps exist. With fr, it's correct. Use fr for grids.

Decimal fractions

grid-template-columns: 0.5fr 1fr 0.5fr;  /* narrow, wide, narrow */

Works. The shares are 0.5 + 1 + 0.5 = 2 total parts; the wide column gets half (1/2), each narrow gets a quarter.