CSS Grid repeat() Function

CSS Grid repeat() Function

The CSS repeat() function provides a shorter way to define repeating track patterns in a Grid layout.

Instead of writing the same column or row size several times, you can specify how many times a track pattern should repeat. The function is commonly used with grid-template-columns and grid-template-rows.

How repeat() Works

The repeat() function accepts a repetition value followed by one or more track sizes.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

The first value, 3, tells the browser how many times to repeat the track definition. The second value, 1fr, defines the size of each repeated track.

This creates three equal flexible columns.

It is equivalent to writing:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Repeating Grid Columns

The repeat() function is commonly used with grid-template-columns.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 150px);
}

This creates four column tracks, each 150 pixels wide.

Changing the repetition count changes the number of repeated columns without requiring each track size to be written separately.

.grid-container {
  grid-template-columns: repeat(6, 100px);
}

This creates six 100-pixel columns.

Repeating Grid Rows

The same function can define repeated row tracks with grid-template-rows.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}

This creates three explicit rows that are each 100 pixels tall.

Columns and rows can both use repeat() in the same grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}

This creates three columns and two rows.

repeat() with fr Units

Combining repeat() with the fr unit provides a convenient way to create equal flexible tracks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

The four columns share the available flexible space equally.

The repeated value does not have to be 1fr.

.grid-container {
  grid-template-columns: repeat(3, 2fr);
}

All three tracks still have equal flex factors because each receives the same 2fr value. Using 2fr instead of 1fr does not make the tracks twice as wide when every flexible track uses the same factor.

Repeating Track Patterns

The second argument of repeat() can contain more than one track size.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px 1fr);
}

The entire 100px 1fr pattern is repeated three times, creating six column tracks.

The resulting track pattern is equivalent to:

.grid-container {
  grid-template-columns: 100px 1fr 100px 1fr 100px 1fr;
}

This technique is useful when a repeating layout alternates between different track sizes.

Mixing repeat() with Other Tracks

Repeated tracks can be combined with tracks defined outside the repeat() function.

.grid-container {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
}

This creates one 200-pixel column followed by three equal flexible columns.

Tracks can also appear after the repeated section.

.grid-container {
  grid-template-columns: 150px repeat(2, 1fr) 100px;
}

This creates four columns: one fixed track, two repeated flexible tracks, and another fixed track.

repeat() with minmax()

The repeat() and minmax() functions can be combined to create tracks that have both minimum and maximum sizing behavior.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

This creates three tracks. Each track has a minimum size of 150 pixels and can grow to share available flexible space.

This combination is especially useful when building flexible Grid layouts. The next tutorial covers minmax() in greater detail.

auto-fit and auto-fill

Instead of using a fixed repetition count, repeat() can use the auto-fit or auto-fill keyword in an auto-repeat.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This allows the browser to determine how many tracks can fit within the available space while respecting the track sizing rules.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Both keywords can create responsive repeating grids. Their main difference becomes visible when the container has room for more tracks than there are items: auto-fill can preserve empty repeated tracks, while auto-fit collapses empty repeated tracks so the remaining tracks can use the available space.

The dedicated auto-fit & auto-fill tutorial covers this behavior in detail.

Benefits of repeat()

The repeat() function reduces repetitive CSS and makes Grid track definitions easier to read and modify.

Using repeat() is particularly helpful when many tracks share the same size or follow a repeated pattern.

CSS Grid repeat() Example

The following example compares three equal repeated tracks with a repeating two-track pattern.

.equal-tracks {
  grid-template-columns: repeat(3, 1fr);
}
.pattern-tracks {
  grid-template-columns: repeat(3, 80px 1fr);
}

Open the example in the editor and change the repetition count or track sizes to see how repeat() changes the number and size of the Grid tracks.