0:01 I've written out the basic HTML here. It's simple enough. We've got a container, so a div with a class of container. We have a header with a class of header, a nav with a class of nav bar, an article with a class of content. Content is this bigger area.

0:16 Then we have an aside with a class of sidebar, a div with a class of ad, and a footer with a class of footer. I've just added these classes in because it makes it easy to select them, give them a color, but then also, shortly, give them a grid area, give them a name.

0:32 If we look at our end goal, this is what we're trying to create. This is what my markup currently renders as. Everything is a block element. It looks like a single column. I mean, it is a single column, I guess. It's valid, but there's no grid involved here.

0:49 What I want to do is use grid to start. We'll do this mobile first. We'll start with the smallest screen size, like you see here. I want a single column grid-based layout so that when I expand it, I can keep using grid and it will be very easy to generate a layout like this.

1:04 I'm going to turn grid on on the container, and that will be our first step. Just to show you, I have some very basic styles, background color on the header. Everything is a background color. I added some heights to the header just so that you could see it a bit more.

1:19 Without that height, it's just very skinny. It doesn't really do anything as far as grid is concerned. Now what I'm going to do is select my container, which is the parent element, and set display to grid.

1:33 Now grid is enabled. If we really want to recreate what I have here, I added in a grid gap. Let's do that. Everything has a grid gap of 20 pixels or something like that, just to add some space between the rows and columns. All right.

1:50 Now what I'm going to do is assign, even though this is working as a single column, I'm going to assign grid-template-areas because that way, as I grow the screen, I can move those areas around.

2:01 Even if it's going to look exactly like this, as it currently does on a mobile size, I'm still going to add in those grid areas. I'm going to call this header. This will be nav. This will be content, sidebar, ad, footer, something like that.

2:16 I'm going to define grid-template-areas and then add my quotes. It's just a single column layout. We have header, and then we have nav, and then we have content, or main, or whatever we want to call that sidebar. Then we have ad, and then footer.

2:44 I could be explicit and say grid-template-columns and just give a one column, but the default is to have a one column layout. This is fine. The next step is to connect each of these individual elements to some name, some template area that has a name.

3:01 The header will have a grid area of header. The content class corresponds to the content here. I'm just going to go through and assign my grid areas.

3:14 Grid-area content, grid-area for the nav bar, I think I just called it nav, grid-area for the sidebar is sidebar, grid-area for ad is called ad, and grid-area for the footer is also just called footer.

3:33 Again, we won't see anything different, but to test that it's working, we could just move our main content to the bottom like this. There it is. It's now reordered on the bottom. That's not the result we want, but it does show that our template areas are working.

3:50 Our names are connected correctly, at least for the content. In the next video, we'll work on making this change layout when our screen size increases. That's coming up.