The CSS repeat() function abbreviates repeated grid tracks or repeated track patterns in a grid-template declaration. It makes long grid definitions easier to read while preserving the same layout. section 5.2
Repeat identical tracks
grid-template-rows: repeat(4, auto) creates four auto-sized rows—the same as auto auto auto auto. Each row grows as needed to fit its content. section 5.2
Repeat a pattern
repeat(3, 2fr 1fr) expands to 2fr 1fr 2fr 1fr 2fr 1fr, producing six tracks. A longer declaration can combine fixed tracks and repetition: 1fr repeat(3, 3fr) 1fr. section 5.2
The repeated value can include named grid lines as well as track sizes. For example, repeat(4, [row] auto) gives each repeated horizontal grid line the name row, allowing placement such as grid-row: row 3 / span 2. section 5.3.1
Responsive card grid
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) lets the grid determine how many equal-width columns fit the viewport, while smaller layouts retain stacked cards. section 17.2.1
