Skip to main content

repeat() CSS Function – How to Define Grid Tracks with Repeated Patterns

The repeat() CSS function allows you to write more concise and readable values when specifying multiple grid tracks with repeated patterns.

note

Syntax of the CSS repeat() Function​

repeat() accepts two arguments. Here is the syntax:

repeat(number-of-repetition, track-list-to-repeat)

Argument 1: number-of-repetition​

The number-of-repetition argument specifies the number of times browsers should repeat the specified track list (the second argument).

The number-of-repetition argument can be any of the following values:

  • Number 1 or its multiple
  • auto-fill
  • auto-fit
auto-fill vs. auto-fit: What's the difference?

The auto-fill and auto-fit values automatically create as many tracks as needed to fill a grid container without causing an overflow.

The difference between the two values is that auto-fit collapses empty tracks to zero-pixel (0px). But auto-fill displays both empty and filled tracks.

Note that empty tracks are columns or rows with no grid item.

Argument 2: track-list-to-repeat​

The track-list-to-repeat argument specifies the track pattern you wish to repeat across a grid container's horizontal or vertical axis.

In other words, track-list-to-repeat consists of one or more values specifying the sizes of tracks browsers should repeat within a grid container.

note

Suppose your number-of-repetition is auto-fill or auto-fit. In that case, you can use only fixed sizes as the track-list-to-repeat argument.

Examples of the CSS repeat() Function​

Below are examples of how the CSS repeat() function works.

How to create a three-column grid container with 70px column-widths​

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 70px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 70px 70px 70px;

How to create a four-column grid container with one 50px and three 90px column-widths​

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create three 90px-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 50px 90px 90px 90px;

How to create a five-column grid container with one 40px and two 60px 1fr column-widths​

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to create two 60px 1fr-wide columns.

Below is the non-repeat() equivalent of the above grid-template-columns property:

grid-template-columns: 40px 60px 1fr 60px 1fr;
note

We used the fr (fraction) unit to scale the third and fifth columns relative to the fraction of available space in the grid container.

CodeSweetly ads

Design in Figma, launch in Webflow

Bring your static designs to life with IX2, wire up content using our powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Find out more

How to auto-fill the grid container with 70px-wide columns​

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() function to automatically fill the grid container with 70px-wide columns.

How to auto-fill the grid container with a minimum of 50px and a maximum of 1fr wide columns​

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fill the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

note

1fr means one fraction unit.

How to auto-fit the grid container with a minimum of 50px and a maximum of 1fr wide columns​

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the CSS repeat() and minmax() functions to automatically fit the grid container with a minimum of 50px-wide columns and a maximum of 1fr.

Overview​

This article discussed what a CSS repeat() function is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter
Tags:
Last updated on by Oluwatobi Sofela