Repeat function

Learn repeated column/row definitions with repeat().

The repeat() function

Writing the same value over and over is tiring. The repeat() function shortens it: repeat(3, 1fr) means 1fr 1fr 1fr. The first value is the repeat count, the second is the size to repeat.

The function can stand alone or sit beside other values. grid-template-columns: 200px repeat(3, 1fr) gives one 200-pixel column followed by three equal flexible ones. It is the cleanest way to shorten long lists.

auto-fill and auto-fit

Instead of a fixed count, you can write auto-fill or auto-fit inside repeat(). These are usually paired with minmax() and let the column count follow the container width automatically.

auto-fill places columns; empty ones stay as visible empty cells. auto-fit collapses the empty cells and stretches the filled ones. For photo galleries, auto-fit is the more common choice.

Exercise Write four equal columns with repeat

Add display: grid and grid-template-columns: repeat(4, 1fr) to .products. That gives a four-column product grid.

Show example solution

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Test yourself

What does repeat(3, 1fr) produce?
```
.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
- 1fr 1fr 1fr (three equal columns)
- 1fr 3 (one column, 3fr wide)
- 3px 1fr (two columns)
- Three separate grid containers
Show answer

1fr 1fr 1fr (three equal columns) — Correct. repeat(3, 1fr) produces three equal 1fr columns; the same as 1fr 1fr 1fr.

Shorten three columns

.triptych {
  display: grid;
  grid-template-columns: ____;
}

Show answer

.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Match each repeat() expression to its meaning

repeat(3, 1fr)

Three equal columns
repeat(4, 200px)

Four fixed columns
200px repeat(2, 1fr)

Fixed + two flexible
repeat(auto-fit, 1fr)

Flexible column count

Next lesson: Summary - Photo gallery

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies