Check out a free preview of the full CSS In-Depth, v2 course:
The "Coding the Holy Grail Layout" 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:

Live code walkthrough of coding the Holy Grail Layout with CSS Grid.

Get Unlimited Access Now

Transcript from the "Coding the Holy Grail Layout" Lesson

>> Estelle Weyl: Let's try it out.
>> Estelle Weyl: This one has three articles, one, two, and three. So we are gonna open it up in a new window. I opened it up in the same window. Well
>> Estelle Weyl: And let's play with it, so I want you to play with it, and I will play with it as well.

[00:00:29] But I'm gonna go back here and then I'm gonna hit, you can also hit try it out and hit control and then open link in a new a window, so that you can actually cheat. Hold it here, and go back here if you need to.
>> Estelle Weyl: So what do we need to do?

>> Speaker 2: Display grid.
>> Estelle Weyl: Display grid. Cuz nothing happens unless we display grid, right? And then, we basically display how many columns we have. Whats the correct way to display that?
>> Speaker 2: Grid template.
>> Estelle Weyl: Grid template column, and what should our layout be? We have a header, a nav, and aside, an article one, two, and three, and then a footer.

[00:01:25] So what we could do, is have the header with the nav right underneath it, and then we side to the side to the left, and have article one be a big article on top, and then two and three be smaller articles taking up the rest of the space underneath it, and then have the footer.

[00:01:44] So let's do it that way. So that means we have a width of three. Because the most counts we're gonna have is when the aside is next to two articles. So, we're gonna have the first one be 1, 8em.
>> Estelle Weyl: And then repeat.
>> Speaker 3: I think you need an S, columns.

>> Estelle Weyl: Thank you.
>> Estelle Weyl: We're gonna repeat, and then do 1fr each, okay.
>> Estelle Weyl: Then,
>> Estelle Weyl: Now let's do the rows. How big do we want our header to be?
>> Estelle Weyl: Rows, you know what? I'm gonna actually define the locations now, because this looks really confusing to me. I'm gonna place them before I do the heights.

[00:02:39] So, the header is, where's the grid?
>> Speaker 4: Row and the column.
>> Estelle Weyl: Okay? We can do grid row. And it goes from the first line to the second line.
>> Estelle Weyl: All right.
>> Estelle Weyl: And grid column.
>> Estelle Weyl: Goes from the first line. How many lines do we have?
>> Speaker 2: Four.

>> Estelle Weyl: Four, very good. We have four because we had one on the left of header, and one of right of the side, and then the two white lines in between. So, we'll put a grid row and grid column on the first one, the nav,
>> Estelle Weyl: Basically we want it to be next, so here I just put the nav on top of the header, but I don't really wanna do that, so I'm going to put it underneath,

>> Estelle Weyl: And I now definitely know that I want my grid-template-rows, I want the first ones to be 3em and then 1em, right? And then the rest, actually, let's make it 6 and 2.
>> Estelle Weyl: Right, and then I'm gonna continue making it a little bit prettier here. Here we have the aside, and we have an article, article, article, but we want the article 1 to take up most of the width, right?

[00:04:28] So let's go to article 1, and we want it to go from,
>> Estelle Weyl: We're starting with row 3 and going to 4. And we're starting with grid column 2 and going to 4.
>> Estelle Weyl: We want the aside to be all the way down here, we don't want it here, right?

[00:04:58] So let's make our aside taller than the article.
>> Estelle Weyl: So, we start in grid row 3 to 5, rather.
>> Estelle Weyl: And just 1 to 2.
>> Estelle Weyl: That's looking good so far, right? And then we want the footer to be, I don't actually have to declare the row, we can just let it land where it lands, right?

[00:05:35] If we add more articles it will add more articles. So here's our layout, it looks terrible. So let's add a gap, grid-gap 20 pixels.
>> Estelle Weyl: And then grid width. You would not do this normally, but you would also have a much better looking thing. Okay, so how's that for a layout of a page?

[00:06:12] I actually think the footer is too big. So let's go with.
>> Estelle Weyl: Here we had ems for the header
>> Estelle Weyl: Or rather 6em for the header and 2em for the nav, and then I wanna do auto and auto because I don't care how I want them to actually fill up the room, right?

[00:06:39] I want this one to fill up whatever my article is going to be, and this one to be whatever my article is going to be, and then I want the footer to be 2ems again. Did that work? It did. How's that for a layout?
>> Estelle Weyl: This is a nice typical webpage, right?

[00:07:07] How many lines of code?
>> Estelle Weyl: Not much.
>> Estelle Weyl: Basically we set this up,
>> Estelle Weyl: And we told a few of the things to go across the whole thing. So we told footer but we could have just done header and nav, right? And then we can get rid of header and nav up here.

>> Estelle Weyl: And article two and three, we just let them go where they went. So how many lines of markup is that? We basically had to tell it aside that we actually wanted to span two articles. We did have to do that.
>> Estelle Weyl: But, we didn't even have to do that.

[00:08:07] Whenever you have just one, you don't even have to include it. So if four lines describing the body which is basically display grid, all right, that's one line. Create grid template columns and rows and there's a shorthand for both of those together, which I believe is a great area but I haven't mastered that yet.

[00:08:26] Then we have grid-gap, then we have the aside which we tell to span. And then we have the first article, which is wider, so we have to tell it to do that. If I got rid of this,
>> Estelle Weyl: We don't actually need that line. And then we have footer, header content just go across the whole thing.

[00:08:45] So we have one, two, three, four, five, six, seven lines to do the full page layout. I think grid is the kind of the way to go, cuz it's gonna make our lives easier.