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.
- A track refers to a grid container's column (or row).
- You can use
repeat()as a value for the CSSgrid-template-columnsorgrid-template-rowsproperties.
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
1or its multiple auto-fillauto-fit
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 zero-pixel (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.
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 examples of how the CSS repeat() function works.
How to create a three-column grid container with 70px column-widths
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the CSS repeat() function to create three 70px-wide columns.
Below is the non-repeat() equivalent of the above grid-template-columns property:
grid-template-columns: 70px 70px 70px;
How to create a four-column grid container with one 50px and three 90px column-widths
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the CSS repeat() function to create three 90px-wide columns.
Below is the non-repeat() equivalent of the above grid-template-columns property:
grid-template-columns: 50px 90px 90px 90px;
How to create a five-column grid container with one 40px and two 60px 1fr column-widths
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the CSS repeat() function to create two 60px 1fr-wide columns.
Below is the non-repeat() equivalent of the above grid-template-columns property:
grid-template-columns: 40px 60px 1fr 60px 1fr;
We used the fr (fraction) unit to scale the third and fifth columns relative to the fraction of available space in the grid container.
How to auto-fill the grid container with 70px-wide columns
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the CSS repeat() function to automatically fill the grid container with 70px-wide columns.
How to auto-fill the grid container with a minimum of 50px and a maximum of 1fr wide columns
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
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.
1fr means one fraction unit.
How to auto-fit the grid container with a minimum of 50px and a maximum of 1fr wide columns
- CSS
- HTML
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;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
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.