0:00 Next, I'm going to introduce a useful function that we can use to reduce duplication. I'm going to go back to having 10 boxes here. In this demo, let's create a 5x2 grid. We'll have five columns. Grid-template-columns. I want them to be evenly sized. I don't want to calculate the percentages. Although, it would just be 20 percent, 20 percent, 20 percent.

0:24 I'm going to do 1fr, 1fr, and just repeat this five times, which is honestly a little obnoxious. Once you get past four times, I'd say it's too many. Any more than this, if I wanted to have seven, for example, it's really annoying because you're going to have to count -- at least I have to count -- to see how many this actually is. I can't just immediately recognize that that's seven fractions.

0:50 In this case, I'm doing seven instead of five. We get our seven. It's a little annoying to have to repeat myself this way. Instead, we have a useful function called repeat. We use it to set the value of a grid property like grid-template-columns or grid-template-rows. It takes two values. The first value is how many times we want to repeat something.

1:12 Let's do six instead of seven so you can notice the difference, and then a comma. Then the second value is what we're repeating six times. Let's repeat one fraction six times, which should be equivalent to me typing out 1fr six times. You'll see we get six evenly sized-columns.

1:31 If I instead change this to four, we now get four evenly sized columns as if I had just written out 1fr, 1fr, 1fr, 1fr, four different times, it would be the exact same end result. It's just nice to not have to actually type that and put all that space in there. Instead, we just use repeat. Now, you may not always want evenly sized columns or rows, which is why we don't always use repeat.

1:57 I can also do things like this -- repeat four times 1fr. Then I also want a 2fr column on the far right. This is what we end up with --1fr, 1fr, 1fr, 1fr, 2frs. That's all there is to repeat. It works for rows as well. I should just quickly demo that. We'll do four columns by four rows, although we don't have enough boxes to fill that. That's fine. I'll do grid-template-rows here. Repeat 1fr four times.

2:29 This makes us a 4-by-4 grid. Even though we don't have 16 elements to fill that grid, it makes 16 tracks, four columns, four rows. They happen to be square because my initial container is a square. This doesn't mean they have to be a square. Just to be clear there, if I change this to be 500 pixels wide, they're no longer squares.

2:51 Each column is the same width and each row is the same height. The last thing to mention about repeat is that you don't have to do it with fractions. That's probably most common in my experience. I could easily say I want four columns of 100 pixels. There we are. It looks weird. It makes me exactly four columns. Each column is 100 pixels wide. If I look at completed --100 pixels wide.

3:16 Fractions are more common. Repeat will work with any length value. You specify how many times to repeat it and what the value is to repeat.