Home >CSS >CSS reference – properties, selectors, functions >repeat()

repeat()

repeat(<count> | auto-fill | auto-fit, <tracks>)

A short way to write repeating grid tracks: repeat(4, 1fr) is the same as 1fr 1fr 1fr 1fr. With auto-fill or auto-fit instead of a count, the browser creates as many columns as fit – a responsive grid without @media.

Values

count – a positive integer: repeat(3, 100px).
a pattern – several tracks can be repeated too: repeat(2, 50px 1fr) = 50px 1fr 50px 1fr.
auto-fill – as many columns as fit; empty columns remain (the items do not fill the whole width).
auto-fit – the same, but empty columns “collapse” to zero and the items stretch across the whole width.

Examples

Two items with auto-fill and with auto-fit – the difference shows only when there are fewer items than columns that fit:

<div class="grid fill"><div>1</div><div>2</div></div>
<div class="grid fit"><div>1</div><div>2</div></div>

.grid {
  display: grid;
  gap: 6px;
  max-width: 320px;
  padding: 6px;
  border: 2px dashed #999;
}
.grid > div {
  padding: 6px 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.grid { margin-bottom: 8px; }
.fill { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.fit { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }

result

With auto-fill the items take up only part of the width (the rest are empty columns), with auto-fit they stretch across the whole width.

A gallery that has one column on a phone and more on a wide display – columns at least 200 px:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

min(200px, 100%) prevents overflow on a display narrower than 200 px.

Things to watch out for

With auto-fill and auto-fit the track must have a fixed minimum size (minmax(200px, 1fr), 200px). repeat(auto-fill, 1fr) on its own is invalid.
One track list may contain only one repeat() with auto-fill/auto-fit, and repeat() cannot be nested.
In a wide container with few items: auto-fill leaves the items narrow on the left, auto-fit stretches them – choose by what should look better.

Browser support

Baseline – widely available: in all major browsers since July 2020, considered widely available since January 2023. Since version: Chrome 57, Firefox 52 (fully since 76), Safari 10.1. As of October 2026 (MDN browser-compat-data).