Check out a free preview of the full CSS In-Depth, v2 course:
The "Item Properties & 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:

Estelle walks through item properties and shows the "Holy Grail" layout which most web pages use to lay out the header, sidebar, content, and footer.

Get Unlimited Access Now

Transcript from the "Item Properties & Holy Grail Layout" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so grid item properties, we've talked about grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row. Did we talk about grid-area? Yes, we did. That's the shorthand. Okay. And then later on we're gonna have justify-self and align-self, which are basically just overrides for justify-content and align-content but just for one cell.

[00:00:28] So let's actually play with the layout. So we have a Holy Grail Layout, right? Do you remember the Holy Grail Layout when we did with the flexbox? Well, we can do it with grid as well and grid is sometimes a more appropriate way to do it. So just one other thing before I go onto that holy grail layout.

[00:00:53] The difference basically between flex box and grid is, do you see that number 4, how it spans two lines?
>> Estelle Weyl: There's no way to do that in Flexbox. In Flexbox, it basically loads all the way across on one line. Both of them, you can change the order, right?

[00:01:12] But when you change the order in Flexbox, it just basically places it between the two cells beforehand. When you change the order in grid, you're basically saying put this is exactly here, this is where I want it. And everything else is just gonna flow around it. If you actually place two items in the exact same location, that's fine in grid.

[00:01:34] You can actually place one thing on top of the other. So let's go onto the holy grail, which is basically we wanna display grid, columns, you're gonna divide into six parts. One third is gonna be between the nav and the aside. And then the main area or the main article is gonna be in the middle, taking up two thirds of it.

[00:02:02] And then the rows you want the header to be 3 ems high, you want the content to be all the available space that's left over, and you want the footer just to be half the size of the header. So that's what we're going to do.
>> Estelle Weyl: We're gonna do a little bit more.

[00:02:21] We're gonna basically say the grid-row for the header goes from the first. It basically takes up the whole first row. It goes from the first grid line to the second grid line. And the grid-column takes up all four columns. The footer is the third row and goes to the fourth.

[00:02:40] And this is what would have happened anyway, okay? But then what I had to do is I had to add the style, which you never have to do in real life. Because right here I display the style block, so it's on the page. So I want the style to stay at the bottom.

[00:02:54] So I basically give this style, put it on the fourth row, and make it go all the way across. So we're gonna actually play with the style and change the style, why not? So let's get rid of this and there we go. So what happened? The header went from the first grid line to the second grid line and from the left-most grid line to the right-most grid line, the navigation takes up all the free space.

[00:03:26] No, it doesn't, it takes up two thirds of it and each one of these takes up one sixth because we have 1fr, 4fr, 1fr. What's 1 + 4 + 1? I can't do math this early in the morning. So [INAUDIBLE] count it with their toes. No, with their fingers, that's better.

[00:03:41] Keep your shoes on. We won't go above ten so that we don't have to count with our toes. And then grid-template-rows, the first one is 3ems. We could change it to 4ems or 5ems if we want the header to be taller. The middle part takes all the available space after that because the bottom part is just 1.5ems.

[00:04:02] So it declared an absolute length on the footer and on the header and basically said that middle area, the article, nav and aside, distributed over rows in the middle.
>> Estelle Weyl: Okay, so header, footer, style, let's change the style.
>> Estelle Weyl: Because why not? Let's just make it go from 1 to 3.

[00:04:31]
>> Estelle Weyl: Why not? Let's make it go from 4 to 7. That doesn't make a difference, right? Because now if we actually added items, if you want here, one here and one here. Because it's now going across three rows, right? So we're gonna take it from 4/5, 5/6, and 6/7.

[00:04:50] But because we don't have any extra cells, it doesn't matter. If I did just,
>> Estelle Weyl: 2/3 and 1/3.
>> Estelle Weyl: And then I'm gonna take the nav and I'm gonna put it in the same spot. So the nav and the style are at the exact same location.
>> Estelle Weyl: You can do that.

[00:05:26] Don't, don't but you can.