Skip to main content

repeat() CSS Function – How to Define Grid Tracks with Repeated Patterns

The repeat() CSS function allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

note

Syntax of the CSS repeat() Function

repeat() accepts two arguments. Here is the syntax:

repeat(number-of-repetition, track-list-to-repeat)

Argument 1: number-of-repetition

The number-of-repetition argument specifies the number of times browsers should repeat the specified track list (the second argument).

The number-of-repetition argument can be any of the following values:

  • Number 1 or its multiple
  • auto-fill
  • auto-fit
auto-fill vs. auto-fit: What's the difference?

The auto-fill and auto-fit values automatically create as many tracks as needed to fill a grid container without causing an overflow.

The difference between the two values is that auto-fit collapses empty tracks to 0px. But auto-fill displays both empty and filled tracks.

Note that empty tracks are columns or rows with no grid item.

Argument 2: track-list-to-repeat

The track-list-to-repeat argument specifies the track pattern you wish to repeat across a grid container's horizontal or vertical axis.

In other words, track-list-to-repeat consists of one or more values specifying the sizes of tracks browsers should repeat within a grid container.

note

Suppose your number-of-repetition is auto-fill or auto-fit. In that case, you can use only fixed sizes as the track-list-to-repeat argument.

Examples of the CSS repeat() Function

Below are some examples of how the CSS repeat() function works.

Create a three-column grid container with 70px column-widths

section {
display: grid;
grid-template-columns: repeat(3, 70px);
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 70px-wide columns.

Below is the non-repeat() equivalent of the above CSS snippet's grid-template-columns property:

grid-template-columns: 70px 70px 70px;

Create a four-column grid container with one 50px and three 90px column-widths

section {
display: grid;
grid-template-columns: 50px repeat(3, 90px);
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create one 50px-wide and three 90px-wide columns.

Below is the non-repeat() equivalent of the above CSS snippet's grid-template-columns property:

grid-template-columns: 50px 90px 90px 90px;

Create a five-column grid container with one 40px and two 60px 1fr column-widths

section {
display: grid;
grid-template-columns: 40px repeat(2, 60px 1fr);
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create one 40px-wide and two 60px 1fr-wide columns.

Below is the non-repeat() equivalent of the above CSS snippet's grid-template-columns property:

grid-template-columns: 40px 60px 1fr 60px 1fr;
note

We used the fr (fraction) unit to scale the third and sixth columns relative to the fraction of available space in the grid container.

Auto-fill the grid container with 70px-wide columns

section {
display: grid;
grid-template-columns: repeat(auto-fill, 70px);
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to automatically fill the grid container with 70px-wide columns.

Auto-fill the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fill the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

note

1fr means one fraction unit.

Auto-fit the grid container with a minimum of 50px and a maximum of 1fr wide columns

section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fit the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Overview

This article discussed what a CSS repeat() function is. We also used examples to see how it works.