Grid & sizing
The functions that size grid tracks in grid-template-columns, grid-template-rows and grid-auto-columns/grid-auto-rows. With them a grid can set how many tracks it has, how far each may grow and shrink, and how closely it follows its content. The grid properties themselves are under Grid; for arithmetic on sizes see calc-size() and clamp() under Math.
Track sizing
repeat()
Repeats a pattern of track sizes, and optionally line names, a set number of times, or as many times as fit with auto-fill or auto-fit. Allowed only in grid-template-columns and grid-template-rows.
| Syntax | repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) |
|---|---|
| Returns | A run of track sizes and line names within a track list |
| Support | Chrome 57 · Firefox 76 · Safari 10.1 |
| Spec | css-grid-2 |
| Count | Effect |
|---|---|
| An integer | Repeats the pattern exactly that many times. |
auto-fill | Repeats as many times as fit in the container without overflowing. Tracks with no items stay, holding their space. |
auto-fit | The same, but empty repeated tracks collapse to zero, so the filled tracks can stretch across the whole container. |
With auto-fill or auto-fit, every size in the pattern must be definite (a <fixed-size>), at least as its minimum, so the browser can work out how many fit. Only one automatic repeat is allowed per track list.
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));minmax()
A track size range: the track is never smaller than the first value and never larger than the second. If the maximum is smaller than the minimum, the maximum is ignored.
| Syntax | minmax( <inflexible-breadth> , <track-breadth> ) |
|---|---|
| Returns | <track-size> |
| Support | Chrome 57 · Firefox 52 · Safari 10.1 |
| Spec | css-grid-2 |
The minimum (<inflexible-breadth>) is a length, percentage, min-content, max-content or auto; it cannot be an fr value. The maximum (<track-breadth>) can be any of those or an fr value.
grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);A plain 1fr track has an automatic minimum, so long content can force it wider than its share. minmax(0, 1fr) removes that minimum.
fit-content()
A track that grows to fit its content, up to the given limit. It behaves like minmax(auto, max-content), except that the track never grows past the argument even if its content is wider.
| Syntax | fit-content( <length-percentage> ) |
|---|---|
| Returns | <track-size> |
| Support | Chrome 57 · Firefox 52 · Safari 10.1 |
| Spec | css-grid-2 |
grid-template-columns: fit-content(15rem) 1fr;