CSS repeat() Function

CSS repeat() Function

The CSS repeat() function defines a repeating pattern of row or column tracks in a CSS Grid layout.

It reduces repeated track declarations and supports fixed repetition counts or automatic repetition using auto-fill and auto-fit. It is commonly used with grid-template-columns and grid-template-rows to create consistent and responsive grid layouts.

Syntax

repeat(count, track-list)
repeat(auto-fill, track-list)
repeat(auto-fit, track-list)

The function requires a repetition count or automatic repetition keyword, followed by a comma and a valid track list.

For example:

grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 100px);
grid-template-columns: repeat(2, 100px 200px);
grid-template-columns: repeat(auto-fill, 150px);
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

The repeat() function can appear within a larger track list.

For example:

grid-template-columns: 200px repeat(3, 1fr);

This creates one 200px column followed by three flexible columns.

Automatic repetition has additional restrictions on track sizing, discussed in the following sections.

Parameters

The repeat() function accepts two required parameters.

For example:

repeat(3, 100px)

The repetition count is 3, and the repeated track size is 100px.

This is equivalent to:

100px 100px 100px

Another example:

repeat(2, 100px 200px)

This repeats a two-column pattern twice, producing four columns.

For automatic repetition, the track sizes must meet the fixed-size requirements of CSS Grid.

How It Works

The repeat() function expands a track pattern into a sequence of grid tracks.

For example:

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

The browser creates three flexible columns of equal size when the available space is distributed equally.

This is equivalent to:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

The function can also repeat a sequence containing multiple track sizes:

grid-template-columns: repeat(2, 100px 1fr);

This expands to:

grid-template-columns: 100px 1fr 100px 1fr;

When using a fixed repetition count, the number of explicit tracks remains the same regardless of container width.

With auto-fill or auto-fit, the browser determines how many repetitions fit within the available space.

Fixed Repetition

A positive integer specifies an exact number of repetitions.

For example:

grid-template-columns: repeat(4, 1fr);

This creates four flexible columns.

Another example:

grid-template-columns: repeat(3, 120px);

This creates three columns, each 120px wide.

Fixed repetition is useful when the layout requires a known number of rows or columns.

For example:

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

The grid creates three equal flexible columns with 15px gaps between them.

The minmax(0, 1fr) sizing allows tracks to shrink below the automatic minimum size of their content, although overflowing content may still require separate handling.

Multiple Track Sizes

The repeat() function can repeat a pattern containing more than one track size.

For example:

grid-template-columns: repeat(2, 100px 200px);

This produces:

grid-template-columns: 100px 200px 100px 200px;

Another example:

grid-template-columns: repeat(3, 80px 1fr);

This creates six columns arranged in three repeated pairs.

Each pair contains an 80px column followed by a flexible column.

Track patterns can also include different sizing functions:

grid-template-columns: repeat(2, minmax(100px, 1fr) 150px);

This repeats a flexible column and a fixed-width column twice.

Repeating multiple tracks is useful for alternating column patterns and structured page layouts.

Fractional Units

The fr unit represents a fraction of the available space in a grid container.

For example:

grid-template-columns: repeat(3, 1fr);

This creates three columns that share available space equally, subject to their minimum sizing constraints.

Different fractions can be repeated:

grid-template-columns: repeat(2, 1fr 2fr);

This creates four columns with a repeating 1-to-2 proportion.

The resulting track pattern is:

1fr 2fr 1fr 2fr

Fractional units are particularly useful for layouts that adapt to the width of their container.

For fixed repetition counts, fr units can be used directly inside repeat().

For automatic repetition, use fixed-size track definitions such as minmax(150px, 1fr) rather than a standalone 1fr track.

auto-fill

The auto-fill keyword repeats a track pattern as many times as the available space allows.

For example:

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

The browser creates as many 150px columns as can fit within the grid container.

When the container becomes wider, additional columns can be created.

When it becomes narrower, fewer columns fit.

Empty tracks remain part of the explicit grid, even when there are not enough items to occupy every column.

For example:

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

This creates responsive columns that have a minimum width of 150px and can expand to share available space.

Any unoccupied tracks remain in the layout and continue to reserve space.

auto-fit

The auto-fit keyword initially determines the number of repetitions in the same way as auto-fill, but collapses empty repeated tracks after grid items have been placed.

For example:

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

The browser creates as many columns as can fit within the available space.

If fewer grid items are present than the number of possible columns, the unused tracks collapse.

Occupied flexible columns can then expand into the available space.

This makes auto-fit useful for responsive layouts where items should stretch to fill the container.

For example, a container with enough room for four columns but only two items can allow those two items to expand rather than reserving space for two empty columns.

auto-fill vs. auto-fit

The auto-fill and auto-fit keywords both create automatic repetitions, but they handle unused tracks differently.

For example:

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

Both declarations respond to the available width.

The difference becomes most visible when the container has room for more tracks than there are grid items.

Use auto-fill when unused tracks should remain available, and auto-fit when occupied tracks should expand into that space.

Using minmax()

The minmax() function defines a minimum and maximum size for a grid track.

It is commonly combined with repeat() to create responsive grid layouts.

For example:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

This creates as many columns as can fit while maintaining a minimum track width of 200px.

Each occupied column can expand to share available space.

Another example:

grid-template-columns: repeat(3, minmax(100px, 1fr));

This creates exactly three flexible columns with a minimum width of 100px.

For automatic repetition, the minmax() function must provide a valid fixed sizing component.

For example, this is valid:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

The following is not valid for automatic repetition:

grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));

The minimum value auto does not provide the fixed sizing required to calculate the number of repetitions.

Repeating Grid Rows

The repeat() function can define grid rows as well as columns.

For example:

.grid {
  display: grid;
  grid-template-rows: repeat(3, 80px);
}

This creates three explicit rows, each 80px high.

Another example:

.grid {
  display: grid;
  grid-template-rows: repeat(2, minmax(100px, auto));
}

This creates two rows with a minimum height of 100px that can grow to accommodate content.

Rows and columns can be defined together:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 15px;
}

This creates a grid with three columns and two explicitly sized rows.

Additional rows can be created implicitly when more grid items are placed than the explicit grid accommodates.

Named Grid Lines

Named grid lines can be included within a repeated track pattern.

For example:

grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

This creates three columns with repeated named start and end lines.

Repeated line names can be referenced using an occurrence number.

For example:

.grid {
  display: grid;
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}
.item {
  grid-column: col-start 2 / col-end 2;
}

The item is placed between the second occurrences of the named start and end lines.

Named lines make larger grid layouts easier to maintain by providing meaningful references instead of relying entirely on numerical line positions.

They can also be used with automatic repetition, subject to the track-list restrictions for auto-fill and auto-fit.

Example

This example creates a three-column grid using a fixed repetition count.

HTML:

<div class="repeat-demo">
  <div class="repeat-demo-item">1</div>
  <div class="repeat-demo-item">2</div>
  <div class="repeat-demo-item">3</div>
  <div class="repeat-demo-item">4</div>
  <div class="repeat-demo-item">5</div>
  <div class="repeat-demo-item">6</div>
</div>

CSS:

.repeat-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
  background-color: #f1f3f5;
}
.repeat-demo-item {
  padding: 20px 10px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

The repeat(3, minmax(0, 1fr)) declaration creates three equal-width columns.

The six items are arranged into two rows, with a 12px gap between adjacent grid tracks.

The number of columns remains fixed at three.

Responsive Example

This example uses auto-fit with minmax() to create a responsive grid.

HTML:

<div class="repeat-responsive-demo">
  <div class="repeat-responsive-item">HTML</div>
  <div class="repeat-responsive-item">CSS</div>
  <div class="repeat-responsive-item">JavaScript</div>
  <div class="repeat-responsive-item">Accessibility</div>
</div>

CSS:

.repeat-responsive-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
  padding: 15px;
  background-color: #f1f3f5;
}
.repeat-responsive-item {
  padding: 20px 10px;
  background-color: #008577;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

The browser automatically determines how many columns fit within the available width.

The minmax() function allows each track to grow, while min(100%, 140px) prevents the minimum track width from exceeding a very narrow container.

As the container becomes narrower, the items move into additional rows without requiring media queries.

When there are fewer items than available columns, auto-fit collapses unused tracks so occupied columns can expand.

Common Uses

The repeat() function is useful for defining consistent and responsive CSS Grid track patterns.

For example:

.three-columns {
  grid-template-columns: repeat(3, 1fr);
}
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fixed-rows {
  grid-template-rows: repeat(4, 80px);
}

These declarations simplify repetitive track definitions and help keep grid layouts consistent.

Limitations

The repeat() function has several important rules and limitations.

• It is used in CSS Grid track definitions, not as a general-purpose repetition function.
• A fixed repetition count must be a positive integer.
• The repeated track list must contain valid track sizes or line-name definitions.
• Automatic repetition uses auto-fill or auto-fit.
• Automatic repetition requires track sizes that meet CSS Grid's fixed-size requirements.
• A standalone 1fr track is not valid inside automatic repetition.
• Only one automatic repetition is permitted within a single track list.
• Automatic repetitions cannot be combined with intrinsic or flexible track sizes outside the automatic repetition in the same track list.
• Fixed repetition counts do not automatically change when the container becomes narrower.
• Track minimum sizes and content can still cause overflow.

For example, this is valid:

grid-template-columns: repeat(3, 1fr);

The following is invalid because the repetition count is zero:

grid-template-columns: repeat(0, 1fr);

The following is invalid because auto-fit requires fixed-size track definitions:

grid-template-columns: repeat(auto-fit, 1fr);

Use a valid fixed minimum size with minmax() when creating flexible automatic repetitions.

Browser Support

The CSS repeat() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It is part of CSS Grid Layout and does not require vendor prefixes in modern browsers.

For example:

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

The function is supported in browsers that implement modern CSS Grid track sizing.

For current compatibility information, visit Can I Use? and search for CSS Grid Layout.

Specifications

The repeat() function is defined in the CSS Grid Layout Module Level 2 .

The specification defines fixed repetition counts, automatic repetition, and the syntax for repeating grid tracks and named grid lines.

Related CSS features include grid-template-columns, grid-template-rows, minmax(), fit-content(), and the fr unit.