0:00 Next, we're going to cover my favorite grid property, which is called grid template areas. Most often we'll use grid template areas to assign names to groupings of tracks within a grid. I'm going to get rid of all my boxes for a moment and we'll just go back to having our empty grid.

0:19 There is a grid to find though. Remember I've set out this grid using grid template rows, grid template columns. There's just nothing in it. Here's my grid, three rows, two columns. What we just did in the previous video was make the top two cells, the top two tracks into a nav bar.

0:37 The bottom to where the footer, the one on the right in the middle is the sidebar and this one here is the main content. I'm going to stick with that. I'm going to create the same layout, but I'm going to do it in a different way.

0:50 When we use grid template areas, what we'll be doing is actually assigning a name to areas on the grid, not to the lines, but to areas. This is a two by three grid. We can have up to six areas if I just wanted each individual track to have its own name.

1:07 That's not what I want. I want this and this, both of these top two cells, these top two tracks to be called nav bar just as an example. I want this one to be called main, this one to be called sidebar, and these two on the bottom to be called footer.

1:24 The syntax for this might seem a bit strange when you're first learning it, but it's actually quite intuitive. We use a property called grid template areas, we assign this to the container the grid container itself, just like grid, template, rows and grid template columns.

1:38 Remember our purpose here, our goal is to assign names to the tracks and I want the top two tracks, the top two cells to be called nav bar. What I do is inside of quotes, I provide a space separated list of names. Each one of these names are totally up to me will correspond to an individual track in the grid.

2:02 I represent each row as text between quotes. This is my first row. I'm labeling this nav bar and this one is nav bar. My middle row is going to have, I guess, we'll call this main and this will be sidebar. On the next line, I'll do main sidebar.

2:21 Then, on my final row, I'm going to have a footer and footer, I want them to be the same. If I give them the same name, the browser knows that these are the same area. It has to match exactly. If I don't spell it correctly they're going to be treated as two separate areas.

2:39 Nav bar, nav bar, main, sidebar, footer, footer. I'll save. We're not going to see anything different but here in the dev tools if I turn on the grid overlay, in Chrome I can select show line names, show line numbers, hide line labels. I'll just hide that to simplify things.

2:59 Then toggle on and off show area names. Area names is very important. That's what we just set up. Again, it's always hard to zoom in. It won't increase the text size, but this says nav bar right here for this whole area. This says main, this says sidebar, and this says footer.

3:20 All that we've done is label different areas on the grid. The next step is to tell our individual elements, which area that they should take up. Basically assign them to one of these named areas. If you're confused about this syntax, I'm going to show another example very soon.

3:38 Just remember that grid template areas wants you to represent each row in your grid, using double quotes. Then inside of each row you represent each cell or each track with some name. A lot of people will use A, B, C instead of semantic names like nav bar, main, and side bar. That's fine too.

3:58 Sometimes it's you just need some label, it doesn't matter what it is, you just give it some name and then we can recall that name later in the next video and apply elements at those particular areas.