CSS Grid: repeat function — beyond basics

Hello. In today's article, I want to tell you more about the CSS Grid repeat() function. Beyond its basic abilities, this inconspicuous function offers some extremely powerful feature: allows you to dynamically change a number of tracks relative to available space. Here, I’ll show you how it works.

This article is part of my CSS Grid introduction series. If you want to check out my previous posts, here you can find the whole table of contents.

So far I told you that the repeat() function can be used as a shortcut for long, repetitive tracks size definition. You can achieve this functionality by providing an integer as the first argument of a function call. This is convenient because helps avoid long lines of code making code cleaner and more readable.

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

instead of:

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

Besides integer, the repeat() function accepts two additional keywords as its first argument. These keywords are auto-fit and auto-fill.

.container {
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-columns: repeat(auto-fill, 200px);
}

Keyword as the first argument of repeat() function.

Using keywords as a function argument causes the number of tracks in a given dimension to be dynamically adjusted to available space within the grid container. This behavior is common for both keywords.

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

Notice how new tracks are added when enough free space becomes available, and how existing tracks are removed when available space shrinks.

Also, keep in mind that using this method every existing or newly created track is explicit. This means, for example, you can refer to the tracks relative to the last line (using negative line numbers).

<div class="container">
    <div class="item"></div>
</div>

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

.item {
    ...
    grid-column: -1 / -2;
}

The differences between auto-fill and auto-fit keywords.

The main difference between both keywords lays in collapsing of tracks. The collapsed track is the track that takes no space in a given dimension. The usage of the auto-fill keyword does not allow the tracks to collapse, even if they do not contain a grid item inside them.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

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

Notice how all the tracks have a non-zero width. This behavior doesn’t change, no matter how many tracks contain grid items.

Usage of the auto-fit keyword force tracks without any grid item to collapse. Occupied tracks take the maximum possible size allowed by their definition. This is possible because their size is not restricted by the size of not occupied tracks.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

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

Keep in mind that even though collapsed columns are not visible, they exist as a part of the grid (here on the right side of the grid).

Restrictions on the type of the second argument.

The use of the repeat() function with the auto-fill/auto-fit keyword restricts the type of the second argument. The allowed type must belong to the fixed-size group of allowed types. According to mdn <fixed-size> can take the form of:

• a length-percentage value

• a minmax() function with:

  • min given as a length-percentage value
  • max given as one of a length-percentage value, a flex value, or one of the following keywords: min-content, max-content, or auto

• a minmax() function with:

  • min given as a length-percentage value or one of the following keywords: min-content, max-content, or auto
  • max given as a length-percentage value

Multiple use of the repeat function in a grid definition.

It’s possible to define a structure of a grid in a given dimension using multiple repeat() function calls. However, when the first call uses the auto-fill/auto-fit keyword as a first argument, any subsequent call must use the following pattern: repeat(<integer>, <fixed-size>).

/* Valid: */
repeat(auto-fit, 100px), repeat(3, 20%)
repeat(auto-fill, 10%, repeat(10, minmax(100px, 500px))

/* Invalid: */
repeat(auto-fit, minmax(100px, 1fr)) repeat(auto-fill, 70%)
repeat(auto-fill, minmax(min-content, 100px)) repeat(auto-fit, 1fr);  

Thank you for reading this short article. If you want to read more content like this you can follow my dev.to or twitter account. Also, feel free to give me any form of feedback. I'd love to read any comments from you. See you soon in my next article!

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️