repeat() compresses repeated CSS Grid track definitions into a pattern. A fixed form such as repeat(3, 100px) expands to three 100px columns, while a multi-track pattern repeats as a whole: repeat(2, 100px 200px 50px) produces six tracks. section 4.4.4
Expanding a fixed pattern
The repetition count multiplies the pattern length. With two repetitions of a three-track pattern, total tracks = 3 × 2 = 6. The CSS equivalent is grid-template-columns: 100px 200px 50px 100px 200px 50px. section 4.4.4
With auto-fill or auto-fit, the browser calculates how many repeated tracks fit. It subtracts the grid gaps from the container width, divides by the track width, and rounds down. A 450px container with 10px gaps and 100px tracks fits floor((450px − 3 × 10px) ÷ 100px) = 4 columns. section 4.4.4
Choose the automatic keyword according to how empty tracks should behave:
- Use auto-fill to preserve the calculated empty tracks and their sizes. section 4.4.4 section 4.6
- Use auto-fit to collapse empty tracks and redistribute their space, especially when tracks use fr units. section 4.4.4 section 4.6
