References

Beginner-friendly references for web development, with live, editable examples.

The CSS repeat() function

Function CSS All modern browsers Updated
Quick answer

The CSS repeat() function writes a repeating set of grid tracks compactly: repeat(3, 1fr) means three equal columns. The keywords auto-fit and auto-fill repeat as many tracks as fit, which — combined with minmax() — produces a responsive grid that reflows on its own.

Overview

repeat() saves you from writing the same grid track over and over. Instead of grid-template-columns: 1fr 1fr 1fr 1fr, you write repeat(4, 1fr) — a count, then the pattern to repeat. The pattern can be more than one track too: repeat(3, 100px 1fr) lays down that pair three times.

Its real power is the auto keywords. repeat(auto-fit, ...) and repeat(auto-fill, ...) let the browser decide how many tracks fit, rather than you naming a number. Paired with minmax() — the classic repeat(auto-fit, minmax(200px, 1fr)) — you get a grid that adds and removes columns as the viewport changes, with no media queries at all.

The difference between the two keywords is subtle but real. auto-fit collapses any empty tracks so the visible items stretch to fill the row; auto-fill keeps the empty tracks, leaving gaps where items could go. They look identical until there are fewer items than columns — that is when you choose based on whether you want the items to spread out or hold their size.

Syntax

/* three equal columns */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* responsive: as many as fit */
.cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Example

Live example 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font: 600 14px system-ui, sans-serif;
    text-align: center;
  }
  .grid div { background: #6d28d9; color: #fff; padding: 18px 8px; border-radius: 8px; }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

Best practices

  • Use repeat(3, 1fr) for a fixed number of equal columns instead of repeating the value by hand.
  • Combine repeat(auto-fit, minmax(...)) with minmax() for responsive grids with no media queries.
  • Choose auto-fit to let items stretch and fill the row, or auto-fill to keep empty tracks.
  • Pair the grid with gap for the gutters rather than margins on the items.

Frequently asked questions

What does repeat() do in CSS grid?
It repeats a grid track pattern a number of times. repeat(3, 1fr) is the same as 1fr 1fr 1fr — three equal columns.
How do I make a responsive grid with repeat()?
Use repeat(auto-fit, minmax(200px, 1fr)). The grid fits as many columns as it can and reflows as the screen changes.
What is the difference between auto-fit and auto-fill?
auto-fit collapses empty tracks so items stretch to fill the row; auto-fill keeps the empty tracks, leaving gaps. They differ only when there are fewer items than columns.
Can repeat() repeat more than one track?
Yes. repeat(3, 100px 1fr) lays down the 100px 1fr pair three times, for six tracks in total.
minmax() rgb()