68. The repeat() Function (Efficiency)

For layouts with many identically sized tracks, writing out every column width is redundant. The repeat() function simplifies this.

Syntax

repeat(<number_of_times>, <track_size>);

Examples

1. Simple Repetition

If you need 6 columns, each taking 1 fraction of space:

css /* Longhand: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */ .grid-6-columns { grid-template-columns: repeat(6, 1fr); }

2. Mixed Definitions

You can use repeat() alongside explicit declarations.

css .grid-mixed { /* 50px sidebar, four 1fr columns, 50px sidebar */ grid-template-columns: 50px repeat(4, 1fr) 50px; }

Auto-Sizing Grid Tracks

repeat() is often used with minmax() (Lesson 73) and auto-fit / auto-fill (Lesson 84) to create truly dynamic, responsive grids.