Use the repeat function to efficiently write grid-template values
We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.
[00:00] Here, we have a container with 26 divs inside. Each one has a letter of the English alphabet. In our CSS, we have a container with a display grid, a 10-pixel gap taking up all the vertical space, and a background color and a font size on every grid item.
[00:17] We want to make some columns for our grid. We'll set up grid template columns. Let's say, we wanted to specify 26 individual grid columns.
[00:29] Luckily, we don't have to type out values for 26 separate columns. We can use the repeat function. In this case, we could specify that we want 26 columns each to be 15 pixels wide. Using repeat gives us an efficient way to specify how we want our repeated columns to be. It doesn't have to just be one value. We could pass in more than one value here.
[00:56] Let's specify that we want a 20-pixel, a 40-pixel, 20-pixel, and 8-pixel column. We want that to repeat three times. We're going to end up with 12 columns because we've repeated four columns three times.
[01:14] Let's say, we wanted to take up the available space, but we wanted our items to stay at this width if there's little available space. We can use min/max for that. There we have it.
[01:28] We can also use named grid lines in our repeated columns. We could have start and end grid lines. Start refers to this grid line. End refers to this grid line. Then, in between, we can start naming our grid lines appropriately.
[01:52] In this case, col-small-start is going to be the same as start. Col-small-end will be the grid line here in between A and B, M and N, Y and Z. It's going to be the same grid line as col-md-start. Let's apply the same grid line naming logic for the remaining columns. Each line of our columns is now named.
[02:24] We can refer to those lines by name, if we need to. They've been named in a descriptive way, depending on the width of the content in between.
[02:33] Lastly, let's delve a little deeper by having a look at what's going on under the hood. I've written a small JavaScript function which simply console locks the grid template columns of our grid container. Let's run that in the console and see what's going on.
[02:52] Now, we can see the grid lines that have been applied. On the first situation, start is the same as col-small-start. CSS has squashed those together for us. The same can be said for col-large-end on the last situation. In between are all our repeated grid lines.