Check out a free preview of the full CSS In-Depth, v2 course:
The "Named Template Areas" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to name column and row areas to lay out your grid based on template names.

Get Unlimited Access Now

Transcript from the "Named Template Areas" Lesson

[00:00:02]
>> Estelle Weyl: We tried it out. So the thing is right now we've been using numbers and those are super complicated. Not really, but it's okay. So grid template areas, you asked me earlier if we were gonna cover grid template areas. And I was like, maybe and look we're gonna cover it.

[00:00:21] So another way to describe the grid is to basically give it named areas to say, here I said header, header, header, nav article aside, footer, footer, footer. So instead of saying one through four, I basically said footer, footer, footer, hair cross. I basically made asciart out of the areas of my page.

[00:00:44] So that's how I define the grid. I've defined the grid as I want the header, we're gonna have the magic layout or whatever the golden ratio layout or whatever they want to call it. It's gonna have the header up top, it's gonna have the nav on the left, the article in the middle, and the side on the right.

[00:01:08] And it's gonna have the footer across the bottom. So, basically I described it that way. I said header, header header cuz I have three columns. In the middle area I have nav article aside, and footer, footer, footer. But the browser still doesn't know what goes where, I have to tell it that I want my header to be in the header area.

[00:01:29] I want my nav to be in the nav area, I want my article to be in the area allotted for article.
>> Estelle Weyl: Let's just get rid of this right here.
>> Estelle Weyl: Okay, this page is not editable. But I put basically aside, grid-area: aside, and then footer grid-area: footer.

[00:01:58] So we can this take code and actually paste it right here and nothing happened. Anyone know why nothing happened?
>> Speaker 2: The display grid?
>> Estelle Weyl: Exactly. Okay, so display grid, but still I haven't given it the locations.
>> Estelle Weyl: So here I'm just gonna do this, and because I can't reach the whole thing I'm gonna have to actually do stuff with it afterwards.

[00:02:31] So the header is all the way across,
>> Estelle Weyl: The aside grid area
>> Estelle Weyl: Aside,
>> Estelle Weyl: Footer (grid-area:,
>> Estelle Weyl: footer, and there it is. Doesn't have a nice way out cuz I haven't given the grid template columns and rows yet. But I just want to show you, I could also have done h, h, h, n a aside.

[00:03:16] Oops, f f f, right? And then I could have said, h, n, a, as and f and we're back to the same thing. So I gave him the name, I just wanted to show you that the names don't have to be header or footer, nav. They can be anything, they can be foobar.

[00:03:41] I used header, footer, and nav because that's what I actually, now that we can use semantic elements in HTML. That's natural way of doing it, but is doesn't have to be that way. So to make it better looking, we can add grid-template-rows:3em 1fr
>> Estelle Weyl: 1em and then grid- template-columns.

[00:04:32] Now for 200 pixels 1fr, and then 100 pixels.
>> Estelle Weyl: And that looks like a nice layout. And the problem is, why is that style in there like that? Anyone know?
>> Speaker 3: The column?
>> Estelle Weyl: It's in the column, it's in that first column. It went down to the next, it's part of the grid.

[00:04:56] So I would actually have to do, if I can see it,
>> Estelle Weyl: S, S, S and then you can't see what I'm writing, but I can do a style. Grid-area-style, okay, so I have an error somewhere in my code which is why it messed up like this. S, what did I do wrong?

[00:05:35] I forgot the quote, so you do have to quote each line. And each line is separate, but I could also do this, right?
>> Estelle Weyl: But that's hard to read and so the usual way of doing it is to actually put everything like a little table, so you can see everything.