CSS repeat() Function
Example
Repeating a track list segment:
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Definition and Usage
The repeat() function represents a repeated fragment of the track list, allowing a more concise way to write repetitive patterns of columns or rows.
This function can be used within CSS Grid properties grid-template-columns and grid-template-rows.
Supported Version: CSS3
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | Chrome | Firefox | Safari | Opera | Edge |
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
CSS Syntax
/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])
/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
| Value | Description |
|---|---|
| length | A positive integer length. |
| percentage | A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto. The user agent can adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage. |
| flex | A non-negative size specifying the flex factor of a track with fr units. Any track sized with flex will distribute the remaining space proportionally according to its flex factor. |
| max-content | Represents the maximum value of the largest content area allocated to the grid item occupying the grid track. |
| min-content | Represents the minimum value of the smallest content area allocated to the grid item occupying the grid track. |
| auto | As a maximum, it is equivalent to max-content. As a minimum, it represents the largest minimum size of the grid item occupying the grid track (as specified by min-width/min-height). |
| auto-fill | If the grid container has a definite size or maximum size in the relevant axis, the repeat count is the largest possible positive integer that does not cause the grid to overflow its grid container. If defined, each track is treated as its maximum track sizing function (each independent value specified by grid-template-rows or grid-template-columns). Otherwise, as its minimum track sizing function, adding grid gaps into the calculation. If the repetition is too large, then the repeat value is 1. Otherwise, if the grid container has a definite minimum size in the relevant axis, the repeat count is the smallest positive integer that fulfills that minimum requirement. Otherwise, the specified track list is repeated only once. |
| auto-fit | Behaves the same as auto-fill, except that after placing the grid items, all empty repeated tracks are collapsed. An empty track is one that has no grid items placed into or spanning across it. (If all tracks are empty, this may result in all tracks being collapsed.) |
Collapsed tracks are treated as having a single fixed track sizing function of 0px, with both gutters collapsed.
To find the number of auto-repeated tracks, the user agent limits the track size to a value specified by the user agent (e.g., 1px) to avoid division by zero. |