CSS repeat() Function

Definition and Usage

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

If there are 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 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 row groups. 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

Related Pages

Reference:CSS grid-template-columns attribute

Reference:CSS grid-template-rows attribute