CSS repeat() Function
Example
Use repeat() to repeat a set of columns in a grid:
#container {
display: grid;
grid-template-columns:
repeat(2, 60px 1fr);
grid-gap: 7px;
background-color:
green;
padding: 7px;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS repeat() function is used to repeat
a set of columns or rows in a grid.
This function is useful if you have a large number of rows or columns in a grid. With this function you create a "repeat-pattern" to be used.
This function is used with the grid-template-columns property and the grid-template-rows property.
| Version: | CSS Grid Layout Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| repeat() | 57 | 16 | 76 | 10.1 | 44 |
CSS Syntax
repeat(repeat-count,
tracks)
| Value | Description |
|---|---|
| repeat-counts | Required. Specifies the number of times the columns or rows should be repeated. Can be an integer of 1 or more, or the keyword auto-fill or auto-fit (which will repeat the columns/rows as many times as needed to fill the grid container |
| tracks | Required. Specifies the set of columns or rows that will be repeated.
Following values can be used:
|
More Examples
Example
Use repeat() to repeat a set of columns in a grid:
#container {
display: grid;
grid-template-columns:
repeat(4, auto);
grid-gap: 7px;
background-color: green;
padding: 7px;
}
Try it Yourself »
Related Pages
CSS reference: CSS grid-template-columns property.
CSS reference: CSS grid-template-rows property.
