CSS repeat() function

Definition and usage

CSS repeat() The function is used to repeat a set of columns or rows in the grid.

If you have a large number of rows or columns in your grid, this function is very useful. With this function, you can create a 'repeating pattern' for use.

This function works with grid-template-columns properties and grid-template-rows Use the properties together.

Instance

Example 1

Using repeat() Repeat a set of columns in the grid:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Try it yourself

Example 2

Using repeat() Repeat a set of columns in the grid:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Try it yourself

CSS syntax

repeat(repeat-count, tracks)
Value Description
repeat-counts

Required. Specify the number of times the columns or rows should be repeated.

It can be an integer greater than 1 or the keywords auto-fill or auto-fit (they will repeat columns/rows as needed to fill the grid container).
tracks

Required. Specify the repeated columns or rows. The following values can be used:

  • Length values (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Named lines

Technical details

Version: CSS Grid Layout Module Level 2

Browser support

The numbers in the table indicate the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Páginas relacionadas

Referencia:Atributo CSS grid-template-columns

Referencia:Atributo CSS grid-template-rows