How the CSS repeat() Function Works

The repeat() function lets you define grid columns and rows without writing the same value over and over. I use it in practically every grid I build – once you know it, typing 1fr 1fr 1fr 1fr by hand feels painful.

Let’s look at how repeat() works, including auto-fill, auto-fit, combining it with minmax(), and some practical examples.

Understanding the CSS Repeat Function

The repeat() function is part of the CSS Grid specifications. It simplifies the process of creating repeated patterns for rows and columns. The function takes two arguments: the number of repetitions (or a keyword) and the track size for each repetition.

Instead of writing grid-template-columns: 1fr 1fr 1fr 1fr; you can write grid-template-columns: repeat(4, 1fr); – same result, cleaner code.

Repeat in Grid Layouts

The basic syntax:

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

In the code above, the grid-template-columns property uses the repeat() function to create three columns, each with a width of 1fr (fractional unit). Shorter and easier to scan than writing each value by hand.

A full example with HTML, CSS, and the rendered result:

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: #1e2a3a;
    color: #f1eeee;
    padding: 20px;
    text-align: center;
    border: 1px solid #2a3a4a;
    border-radius: 4px;
}

Result:

You can also repeat multiple track sizes as a pattern. For example, repeat(3, 1fr 2fr) creates six columns alternating between 1fr and 2fr widths.

Responsive Grids with auto-fill and auto-fit

The real power of repeat() shows up when you replace the fixed count with the keywords auto-fill or auto-fit. Combined with minmax(), this creates fully responsive grid layouts without any media queries.

The auto-fill Keyword

auto-fill fills the row with as many columns as it can fit. If there aren’t enough items to fill all columns, the empty tracks remain and preserve their space.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

Each column is at least 150px wide and grows to fill available space. On narrow screens, items stack into fewer columns automatically.

The auto-fit Keyword

auto-fit works like auto-fill, but it collapses any empty tracks to zero width. This means existing items stretch to fill the entire row.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

To learn more about building responsive layouts using this technique, check out the post about creating responsive grid layouts without media queries.

Can You Use the repeat Function with Flexbox?

You cannot use the CSS repeat() function with Flexbox, since it is exclusive to CSS Grid properties (grid-template-columns and grid-template-rows).

To achieve similar behavior with Flexbox, you can use the calc() function to define flexible widths for repeated elements. Take a look at the following example where calc() ensures each item retains its size despite the gap.

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-item {
    width: calc((100% - 20px) / 3); /* Three items per row with a 10px gap */
    background-color: #2a1520;
    color: #f1eeee;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #3c2030;
    border-radius: 4px;
}

Result:

That said, in most cases where you need a repeating grid pattern, CSS Grid with repeat() is the better choice over Flexbox since it was designed for exactly this purpose.

Repeating with Named Lines

You can include named grid lines inside the repeat() function. This is useful for larger layouts where you need to reference specific lines by name.

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

This creates four columns, each with a named start and end line. You can then place items using these names: grid-column: col-start 2 / col-end 3;.

Benefits of the Repeat Function

Why bother with repeat() instead of just typing the values? Two reasons. First, changing a 4-column grid to 6 columns means editing one number instead of adding two more values. Second, when you pair it with auto-fit and minmax(), you get a fully responsive layout with no media queries at all.

FAQs

Common questions about the CSS repeat() function:

Summary

repeat() saves you from typing the same track value over and over, and paired with auto-fit and minmax(), it handles responsive layouts with zero media queries. If you work with CSS Grid regularly, this is one function you will use constantly.