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
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 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;
Learn Flexbox with Images
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.
Build your website with Namecheap
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.
Use Flexbox like a pro
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.