CSS grid and the repeat() function: how and when to use it?

This article will focus on CSS and repeat() function – we will define the function, and most of all show you how and when to use it with a help of a few examples.

What is a repeat() function?

The repeat() function works great with columns or rows that have the same size. The repeat() function enables a a recurring pattern of a code to be written in a more compact form. The function can be used in the grid-template-columns and grid-template-rows CSS grid properties. The syntax looks like this:

repeat(number of repeats, code to be repeated)

Let’s take a look at the repeat() function through an example. We have a grid layout with 5 columns that are equally wide, like so:

.my-grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

OK, these five 1fr columns are not so hard to repeat but imagine a layout with 100 columns. Huston, we have a readability problem.

So, instead of repeating these five units above, we can simply tell the function:

• how many times to repeat (in our case 5 times)
• what to repeat (in our case 1fr), like so:

.my-grid-container {
    grid-template-columns: repeat(5, 1fr);
}

Happy days!

We can use the repeat() function with patterns, too!

.my-grid-container {
    grid-template-columns: repeat(5, 1fr 100px 2fr);
}

This code will create 15 columns – it will repeat:

• five times
• the pattern of three columns (1 column with 1fr, second with 100px, and a third column with 2fr)

Pretty cool, right? And so neatly packed.

We can even use the repeat() function with named lines

.my-grid-container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(7, [col] 1fr);
  grid-template-rows: repeat(10, [row] 100px);
}

The code above is equivalent to the following long-form definition:

.my-grid-container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr;
  grid-template-rows:
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px
    [row] 100px;
}

Although it might seem logical, we should emphasize that the named grid lines at the end of repeat notations end up sharing the same line as the next starting name line. The repeat() function would make a code look like this:

.my-grid-container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(7, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(10, [row-start] 100px [row-end]);
}

We get this equivalent long-form definition:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr [col-end];

  grid-template-rows:
    [row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px
    [row-end row-start] 100px [row-end];
}

Using the auto-fill sizing keyword in a repeat() function

So, we want a layout where we want to squeeze in as many columns of 100px as possible. For the purpose of having “as many columns as possible” we will use the auto-fill sizing keyword, like so:

.my-grid-container {
    grid-template-columns: repeat(auto-fill, 100px);
}

The code above will create a grid layout with as many columns as possible, where each column is 100px wide. If our screen is 1920px wide, this code should create 19 columns.