repeat() is a built-in CSS function for declaring repeated grid columns or rows without writing the same track definition multiple times. It accepts two comma-separated values: the repetition count and the size of each track. section 2.3.1
Use repeat() when several grid tracks share the same sizing:
- Write repeat(2, minmax(auto, 1fr)) for two flexible columns. section 2.3.1
- Place the function inside grid-template-columns or grid-template-rows. section 2.3.1
- Combine it with fr units, as in 3fr repeat(3, 1fr), to give one column half the available fraction space and divide the rest equally. section 2.3.4
A three-column grid
main { display: grid; grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px; } This creates two equal flexible columns followed by a 250-pixel column. section 2.3.1
Listing 2.4 Setting the amount of columns
main {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr)) 250px;
}
Inspect the complete grid declaration and see how repeat() reduces duplicated column sizing in a practical layout. section 2.3.1
