CSS Grid

Repeat

The repeat function allows us to reduce repetition when specifying grid-template-columns or grid-template-rows.

Syntax

Copy
  grid-template-rows: repeat(3, 1fr);

is the same as

Copy
  grid-template-rows: 1fr 1fr 1fr;

repeat takes two arguments: number of types to repeat and a valid grid length value/type. In the above example we create three rows with a height of one fraction.

Code example: 12 column grid layout

In the below example, we have created a typical 12 column layout used in many UI frameworks.

Copy
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

1

2

3

4

5

6

7

8

9

10

11

12