A fraction unit (`fr`) makes Grid tracks share the space left after the container pays for fixed tracks and gaps. Instead of guessing pixel widths, assign relative weights: `1fr 2fr 1fr` divides the available remainder into four equal shares, then gives the tracks one, two, and one shares. The browser repeats that calculation whenever the container changes size. section 4.1.3 section 4.3.2
grid-template-columns: 1fr 2fr 1fr;
Treat each `1fr` as one unknown share: the middle track receives twice the width of either outer track. section 4.1.3
For a flexible track valued at `nfr`, calculate its width as `W = (n / T) × R`, where `T` is the total fraction count and `R` is remaining free space. With a 1000px container, 100px and 120px fixed tracks, and three 20px gaps, 720px remains. In `100px 1fr 2fr 120px`, `1fr` is 240px and `2fr` is 480px. section 4.3.2
.container {
display: grid;
width: 1000px;
grid-template-columns: 100px 1fr 2fr 120px;
column-gap: 20px;
}
This grid combines fixed columns, flexible columns, and gaps; subtract the fixed costs before splitting the remainder between `1fr` and `2fr`. section 4.3.2
The remainder can be smaller than the declared container width. With `border-box`, subtract horizontal padding and borders as well as fixed tracks and gaps. In an 800px grid with a 200px fixed column, 60px of gaps, 12px of borders, and 30px of padding, 498px remains; `2fr 1fr` becomes 332px and 166px. section 4.3.3
`fr` is flexible, not an unconditional promise of a final size. The sizing algorithm considers content-based minimums and constraints such as `min-content`, `max-content`, and `minmax()`, then may adjust and redistribute space. If fixed tracks consume all available space, a flexible value can calculate to 0px; content can still force the track to its minimum width and overflow. section 4.3.4 section 4.3.5
Protect a narrow card column
Use `minmax(250px, 1fr)` when a column may grow with available space but must not shrink below 250px. In `3fr minmax(250px, 1fr)`, the second track takes one share when that share is at least 250px; otherwise it stays 250px and the other track is reduced. This pattern also supports product-card grids with readable minimum widths. section 4.4.1
Use fraction units for proportional layouts that adapt without first asking how wide the viewport is. Combine them with `repeat()` and `minmax()` when tracks need both fluid growth and a readable lower bound. section 4.6 section 6.2.1
