repeat()
The repeat() function compactly defines repeated grid tracks.
Syntax
repeat(<count|auto-fill|auto-fit>, <track>...)Examples
.fixed { grid-template-columns: repeat(4, 1fr); }
.fluid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Output
The first grid has four equal columns; the second fits as many 200px+ columns as space allows and stretches them.
Notes
Use an integer for a fixed count. auto-fill keeps empty implicit tracks; auto-fit collapses empty tracks so existing items stretch to fill. Only valid in grid track lists.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 57 |
| firefox | 52 |
| safari | 10.1 |
| edge | 16 |