CSS repeat() Function
Example
Fragment of the repeated track list:
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Try it Yourself »
Definition and usage
The repeat() function represents a repeated fragment of the track list, allowing a large number of columns or rows that display a repeating pattern to be written in a more compact form.
This function can be used in CSS Grid properties.grid-template-columnsandgrid-template-rows。
Supported versions: CSS3
Browser Support
The number in the table indicates the first browser version number that supports this function.
| Function | |||||
|---|---|---|---|---|---|
| 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 | Positive integer length. |
| percentage | A non-negative percentage relative to the inline size of the grid container for column grid tracks, and the block size of the grid container for 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 may adjust the intrinsic size contribution of the track to the size of the grid container, increasing the final size of the track by the minimum amount necessary to comply with the percentage. |
| flex | A non-negative dimension with the fr unit specifies the flex factor of the track. Any track sized with flex will distribute the remaining space proportionally according to its flex factor. |
| max-content | Represents the maximum value of the maximum content area allocated to grid items occupying the grid track. |
| min-content | Represents the minimum value of the minimum content area allocated to grid items occupying the grid track. |
| auto | As a maximum value, it is equivalent to max-content. As a minimum value, it represents the maximum of the minimum sizes of grid items 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, then the number of repetitions 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 defined by grid-template-rows or grid-template-columns). Otherwise, it is treated as the minimum track sizing function, with grid gaps included in the calculation. If the number of repetitions is too large, then the repeat value is 1. Otherwise, if the grid container has a definite minimum size in the relevant axis, the number of repetitions is the smallest positive integer that satisfies this minimum requirement. Otherwise, the specified track list is repeated only once. |
| auto-fit | Behaves the same as auto-fill, except that after placing grid items, all empty repeated tracks will collapse. An empty track is one where there are no grid items flowing into or spanning the grid. (If all tracks are empty, it may cause all tracks to be collapsed.) A collapsed track is treated as having a single fixed track sizing function of 0px, and the gutters on both sides are collapsed. In order to find the number of auto-repeated tracks, the user agent constrains the track size to a user-agent-specified value (e.g. 1px), to avoid division by zero. |
other extensions