repeat()
Repeats grid tracks instead of writing them out one by one.
Syntax
repeat(count, size)Parameters
| Parameter | Type | Description |
|---|---|---|
| count | integer | auto-fill | auto-fit | A number, or `auto-fill` / `auto-fit` — as many as fit. |
| size | track size | The size of each track, or a pattern: `repeat(2, 100px 1fr)`. |
Examples
Four equal columns:
<style>
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grid div { padding: 8px; background: lightskyblue; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>auto-fill keeps empty columns, auto-fit stretches the items over them:
<style>
.grid { display: grid; gap: 6px; }
.fill { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.fit { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.grid div { padding: 8px; background: palegreen; }
</style>
<div class="grid fill"><div>auto-fill</div><div>2</div></div>
<p></p>
<div class="grid fit"><div>auto-fit</div><div>2</div></div>Notes
repeat() works only in grid-template-columns and grid-template-rows.
See also
- grid-template-columns — The number and widths of the columns of a grid.
- minmax() — A grid track size between a minimum and a maximum.
Related recipes
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.