CSS Grid: repeat function — basics

Hello. Today I want to talk about the last function specific to CSS Grid: repeat function. This simple, yet powerful tool can make your life much easier when building complicated layouts. Let’s dive in!

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.

Function definition.

The function can be used only as a value of grid-template-columns or grid-template-rows CSS properties. It can be used several times in single property.

grid-template-columns: repeat(...) repeat(...);

The function takes two arguments: positive number or one of two special keywords (auto-fill or auto-fit). The type of the first argument determines the available values for the second argument and the final result. Therefore this article will be dedicated only to the numeric argument. The use of auto-fill and auto-fit keywords is a little more complex subject and deserves a separate article.

grid-template-rows: repeat(10, ...) repeat(5, ...);

The value of the second argument takes exactly the same syntax as the value of grid-template-columns/grid-template-rows CSS properties. This means we can use a combination of any method used to define track size (like length type, percentage, fr unit, sizing keywords, or sizing function) along with grid lines names. You can check out one of my previous articles as a reminder.

grid-template-rows: repeat(3, 1fr 10px 20% auto fit-content(10px));

grid-template-columns: repeat(2, [first] 1px [second, abcd] 1fr);

Resulted value is pretty straightforward: it is the second argument multiplied by the first argument.

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

is equivalent to:

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

grid-template-columns: repeat(2, [a] 100px [b] 50px [c]);

is equivalent to:

grid-template-columns: [a] 100px [b] 50px [a, c] 100px [b] 50px [c];

Notice how grid line names are applied to according grid line.

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. ❤️