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

• A track refers to a grid container’s column (or row).
• You can use repeat() as a value for the CSS grid-template-columns or grid-template-rows properties.

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

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;

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

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

Create your web presence in no time

Domain, Hosting, SSL, .COM, and more for less.

Buy now

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

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.

CodeSweetly ads

Use CSS Grid like a pro

Learn CSS Grid with live examples and images.

Check it out

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

CSS

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;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

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.