`Repeat()` - Function CSS

repeat()

Summary of characteristics of the `repeat()` function

Quick description

Makes it easier to define the rows or columns of a grid when there are many of them.

Status

Standard

Predefined values

auto-fill | auto-fit | auto-areas

W3C Module

CSS Grid Layout Module

References (W3C)

🡇

🡅

CSS Grid Layout Module Level 3

Document status: WD (Working Draft)

CSS Grid Layout Module Level 2

Document status: CR (Candidate Recommendation)

CSS Grid Layout Module Level 1

Document status: CR (Candidate Recommendation)

Syntactic schema of `repeat()`.

Syntactic schema of the repeat() function
Detailed syntax and examples

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:

integer is an integer, positive, unitless number.
length is a positive numeric value, followed by one of the CSS dimension units.
Multiple length values can be specified, separated by spaces.

Description of the `repeat()` function.

The repeat() function is used to set the widths of columns in a grid or the heights of rows. repeat() avoids repeating identical values multiple times.

Example :


	grid-template-columns: repeat(10, 10%);

	/* Is equivalent to : */

	grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% ;

For more information about sizing rows or columns in a grid, see the grid-template-rows and grid-template-columns , as well as the description of the fr unit.

The repeat() fonction can be used with:

grid-template-columns : Defines the number and width of columns in a grid.
grid-template-rows : Defines the number and height of lines in a grid.

Syntax of the `repeat()` function.

grid-template-columns: repeat(5, 200px); n w

n is a positive integer, without units, that indicates the number of repetitions.

w is the width of a column or the height of a line. Refer to the grid-template-columns and grid-template-rows properties for different syntaxes accepted for this value.

Note that the w value can be a series of several values, but the repeat() function will not consider it to be of several parameters: everything after the decimal point is considered the value to be repeated.
Thus the syntax repeat(5, 5%, 15%) is equivalent to
5% 15% 5% 15% 5% 15% 5% 15% 15% 15%.

The grid below has been defined with 5 columns with a width of 50 pixels each.

1
2
3
4
5

repeat(5, 50px);
grid-template-columns: repeat(auto-fill, 100px); n w

When auto-fill is specified in place of the first parameter, the repeat() function calculates the number of columns or rows given the dimensions of the container. The following conditions must be met for auto-fill to be allowed:

Careful! For repeat() to be usable with auto-fill, the column dimensions must be expressed in a absolute unit (pixels for example).
- If auto-fill is used to define columns, the width of the container must be defined, or at least its maximum width (See the max-width property or the minmax() function.)
- If auto-fill is used to define rows, the maximum height or height of the container must be set (see the max-height property or the minmax() function).
- The second parameter w should not be expressed as percentages.
The grid below has widths set with auto-fill: the number of columns depends on the width of the container.

1
2
3
4
5

repeat(auto-fill, 75px);
grid-template-columns: repeat(auto-fit, 100px); n w

With auto-fit specified as the first parameter, the repeat() function behaves as with auto-fill but the columns (or lines) that would end up empty after positioning the elements will have their width reduced to 0.

In the grid below, the second item (in blue) is positioned in column 3, leaving an empty cell before it. By increasing the width of the container, you can make the second column of the grid completely empty. In this case, the operation of auto-fit makes this column disappear (width reduced to 0).

1
2
3
4
5

repeat(auto-fit, 60px);

But it's even more relevant to use auto-fit by setting the minimum and maximum values for widths (with the minmax() for example). The result is something that adapts very well to the size of the screen, and without loosing space.

1
2
3
4
5

repeat(auto-fit, minmax(60px, 1fr));
grid-template-columns: repeat(auto-areas); ⚠

The auto-areas value is reserved for grids of the masonry type.

1
2
3
4
5

repeat(auto-areas);

Simulator.

grid-template-columns :

repeat( 3, 200px )

repeat( 6, 1fr )

repeat( 3, 1fr 2fr )

Browser compatibility.

Current browsers all correctly handle sizing rows or columns in a grid with the repeat() function, except for the new possibilities offered by masonry-type grilles.

Column 1

Support by browsers of the repeat() function to define the width of columns, using the grid-template-columns property.

Column 2

Support by browsers of the repeat() function to define the height of rows, using the grid-template-rows property.

repeat() function
with
grid-template-columns

repeat() function
with
grid-template-rows

Estimated overall support.

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`repeat()` function history.

CSS Grid Layout Module Level 1

This specification defines how to create layouts in the form of grids, composed of rows and columns, with a document structure that remains very simple: a container and as many elements as there are cells. Much simpler in any case than tables.
Each of the cells can be aligned horizontally within the width of the columns, or vertically within the height of the rows. They can also be distributed or enlarged to cover all the available space. The content of each of the cells can be aligned horizontally and vertically.
A new unit (fr) is available for sizing columns or rows.

Regarding repeat(). Introducing the repeat() function to make it easier to enumerate the columns of a grid.

April 07, 2011
Working Draft.
September 29, 2016
Candidate Recommendation.
CSS Grid Layout Module Level 2

This level 2 of the grid specification introduces the concept of a subgrid. It is about grids nested within another, with the preservation of column and/or row alignment.

Regarding repeat(). No change to the syntax of the repeat() function.

February 06, 2018
Working Draft.
August 18, 2020
Candidate Recommendation.
CSS Grid Layout Module Level 3

Level 3 of the specification introduces a new concept: masonry grids. These are grids in which only the columns or the rows are fixed, with the other dimension able to change depending on the size of the contained elements. This required the addition of several properties.

Regarding repeat(). Adaptation of the syntax of the repeat() function to the new "Masonry" type grids.

September 19, 2024
Working Draft.