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