0:00 We've defined our named areas within the grid. The next thing you have to know is how to assign individual elements like our red box, our blue box, our green box, how do we assign them to specific areas that we've already defined?

0:14 I've turned my red box back on, meaning I just uncommented it. We have this red box, and if I want to assign it to the footer area, which is this area down here that spans these two cells, so these two tracks, I use a special property called grid-area.

0:31 Then I provide a name of an area that I've defined, like footer. If I set red box to have grid-area of footer, it now takes up the whole area with the name of footer, which as we defined in the previous video, spans the bottom row, two cells.

0:49 If instead I didn't have footer here, but I had some other thing as the second track, well now footer is only going to be that first cell, or that first track. The names matching is very important.

1:01 That's how the browser knows these refer to the same thing, the same area, it spans across two columns. Why don't we, I guess we can leave it down there, that's fine. Why don't we now work on the nav bar? I'll pick one of my boxes, it doesn't really matter which one.

1:20 Let's add in, sure we'll go with the blue box. I want the blue box to be my nav bar. As you can see it fills in a spot right now, by default it just takes up a single cell in a single row as we know.

1:33 I could tell it I want it to span two or something like that, but I've already defined this area called nav bar. All I have to do now is select that blue box and set its grid-area to be nav bar. There it is, it takes up the area with the name nav bar.

1:53 Let's do the sidebar next, just pick one of these again. Why don't we work with the, sure, the green box, I want to be my sidebar. It's not in the right spot right now. I'm not going to worry about telling it to start at column line two or something like that.

2:08 I'm just going to tell it to take up the area that I defined for it called sidebar. I'll select my green box, grid-area is sidebar. Then our final piece here, I mean technically if I just add this yellow box back in, it will fill in that empty spot.

2:29 Again, if I want to ensure that it goes there, I can set grid-area to be whatever I named that area, which in my case is main. We don't see a difference. That's grid-area. I'm going to show some more examples of this, maybe some more complicated layouts.

2:48 This is my personal favorite way of positioning elements within a grid because it's more intuitive. We assign labels to the actual areas, not the lines, I don't care about the lines very much, but instead the areas. Then I assign elements using those area names.