0:00 Next up, I'd like us to try and build this more complicated layout using grid template areas. It's just colored boxes again. It doesn't really represent anything at all. It's just more complex in that we have certain elements going all the way across the container.

0:14 Certain ones take up a small amount of space. Multiple columns spanned, but also multiple rows spanned. The first thing we have to do is decide, what is the grid itself going to look like underneath this?

0:27 If we ignore the elements in the grid, ignore the colored boxes, what's the underlying structure? It's going to be at least four different rows, as you can see, one row, two, three, four. They look to be equally sized. Then for the columns, I would say the same thing.

0:45 We have a column here, a column here, a column here, and a column here. A four by four setup. They don't have to be the same size. To recreate what you see here, we don't have to do it exactly, but it's most likely we're going to want a four by four grid.

1:02 That's what I'm going to start with. Without anything in my grid container, I'm just going to define the underlying structure. I've set display to grid on the container. Then I'll set my grid-template-columns to be four equally sized rows. I think I'll just use repeat to help me with this.

1:20 Four times, one fraction. Then I'll basically do the same thing for the rows. Four columns that are the same, four rows that are the same, they're each one fraction. It happens that it's 1000 by 1000 pixels. We're working with a square grid.

1:37 This doesn't mean that the cells, the tracks have to be square. It's just a fraction of the available height and the available width. There we are. We have our four by four grid. Next, I need to go and lay out the different names for the areas. There's a lot of areas here.

1:55 Like I said, they don't really represent anything. It's not like this is an ad or a footer or a nav bar. It's just a complex example. I'm just going to use letters A, B, C, D, and so on. First of all, whatever this red box is, we'll call it A. It goes all the way across one row, four columns.

2:14 When I set out my grid template areas, grid template areas, I know that I'm going to have my first whole row will be dominated by A. A, A, A, A. All four cells, all four tracks are devoted to that area named A. Then we get to our second row.

2:34 I'm just going to call this one B, just in the order that I encounter them from left to right. This will be B. Remember the name does not matter at all as long as you're consistent. Then B does not continue over in this row. It continues down below.

2:48 I'm going to leave B alone now and move on to this yellow, which I'll call C. It spans two cells, as you can see right here. Then we get to what I'll call D. Then on the next, the third row, we pick back up with this orange box, which is called B. Then we have this blue in the middle.

3:12 What letter am I up to? A, B, C, D, so E. It spans two of them. Then we get to this indigo purply color, which I'm going to call F. That's just the next letter. It spans two columns. Look at that. We wrote beef.

3:28 Then on this next one, we have our teal box on the final row that goes across two columns. I'll call that one G. Then we have pink. That's only a single column. That will be H. Then finally we finish F, which spans two rows. Just like that.

3:51 If you look at this, I mean, you can see the layout, right? A, A, A, A, B spans two rows, F spans two rows. This gives our areas names. As you can see here, it's a little tricky to see the names, but they are here. This is A. This is D, for example. This is F.

4:11 Now I just assign my individual boxes to those places. I have eight boxes. I've given them each an ID. Red box, orange box, yellow box, green box, blue, indigo, teal, and pink. I've already selected them over here. Now I just need to assign the grid area to each one.

4:34 I want this red box, if we're just following this, to be area A, so grid area of A. The orange box is this area here, which we called B, so grid area of B. Now all the other stuff is going to try and fill in, as you can see here, but A and B are correct.

4:57 Now we move on to the yellow box, which takes up the C area. Yellow box has grid area of C. There it is. Then we have our green box, which is supposed to take up area D. Moving on down. We have our blue box in the middle, and that should be assigned area E.

5:27 We have our indigo purply box. I called it indigo. That should be assigned area F. These two here. All right. We're almost there. Now I need to make this teal one assigned to whatever we called that area on the bottom left, G.

5:49 Then the pink one, which I think I just called pink box, should be assigned area H. There we go. Colors is a silly example. Boxes, it's not the most exciting.

6:07 We've made a pretty complex layout where elements are spanning a whole bunch of columns or multiple rows or just a single track in the whole grid. They're nice and nested together, but I don't have to specify any row numbers, any line numbers, or anything like that.

6:22 I simply lay out a grouping of areas using, in this case, letters, although I would not use letters if there was a clear, obvious name. If this was a nav bar, I'd call it nav bar. If this is a sidebar, I'd call it sidebar.

6:36 In this case, it's just a layout, which sometimes you are just making a fancy looking layout just for decorative purposes, in which case it's fine just to use letters. We set up these letters, these names, and then apply them to individual elements to tell each element where in the grid it should live.