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-columns
orgrid-template-rows
properties.
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
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.