Define a Page Layout with CSS Grid Using grid-template-areas

Instructor: [0:00] Let's build up a page layout using grid-template-areas. Since there are just three grids here, header, content, and footer, we'll have one column and three rows. Currently, I have the grid-template-columns set to one fr and grid-template-rows set to one fr, one fr, and one fr.

[0:19] To make it look more like a normal website layout, let's change this middle row to five fr. Now, it looks a little more like a regular layout with a header, a big content box, and a footer. Make sure you have index.html open and Firefox Developer Browser.

[0:35] Let's turn on the developer tools. Let's turn on the overlay grid. Make sure it's a color that you can see well. This time, make sure that grid display settings has the display area names checked off. Because there are only three grid items, it's positioned properly with the header on top, then content, then footer at the bottom.

[0:55] However, most layouts aren't this simple. To make it easier to visualize more complex layouts, we can use grid-template-areas. Grid-template-areas allow you to spatially define how you want certain objects to show up on your page. It looks like a grid as you define columns and rows.

[1:11] In this case, it'll be quite simple. Header, content, and footer. You want to make sure there are quotation marks around each row. Now, the magic begins. The grid-template-areas are now labeled on the browser.

[1:26] Now that we can visually see which areas of the page are the specific grid-template-areas, we can start getting more creative with the page layout. Let's add in a navigation to the left-hand side of the content to create another basic Web layout.

[1:40] Let's start by editing the grid-template-areas to show the layout we want. We want the header to be across the whole page, then navigation and content under that, side by side, and then the footer again that spans across the page.

[1:52] How can we show that as a grid? As mentioned before, you can kind of think of grid-template-areas as a grid. Header will be going across the whole entire page, so header, header. We want the navigation to the left and then content for the second row. Then the footer will also be going across.

[2:09] We have to make sure that these are two columns now. I'll have one fr and one fr. This should have the header going across and then the navigation bar to the left and then the content and then, on the bottom row, the footer going across.

[2:26] Let's see what happens. All right. We have the header, header, navigation, content, footer, footer. Wait. What's going on here? The header has header in it, but then the second header has content. Then the navigation bar says footer. Good thing we have the grid-template-areas labeled because now we can get to troubleshooting.

[2:51] While it's great that we labeled the template areas, because we haven't defined the grid area, CSS can't read our minds and places the grid item one after the other in every available space.

[3:02] Since we only have three grid items, header, content, and footer, CSS Grid just placed header, content, and footer one after the other. We can solve this issue by creating class and setting the class names to the grid areas. Before we go any further, we have to remember to put the navigation in.

[3:21] There are a lot of moving parts. Let's go through them one by one. First, we have to set the class name for each section we want. We want header. We also want nav for navigation. Then we also want the class content for the content area. Then we want the class footer for the footer area.

[3:38] Let's give that a save on index.html. Let's refresh the page. Oof. It's looking a little complicated but no problem. Since the grid areas are labeled, it'll make it really easy for us to troubleshoot.

[3:53] We're back here. We have the grid-template-areas defined as the header going across the whole way, the navigation, then content for the second row. Then the third row will have footer going across the whole way.

[4:05] The first class we want to put in is the header. We want to say, "Grid area header." That's the name we want. Then we keep on doing the same for the navigation area, content, and footer area.

[4:17] I use the same names for the class and the grid-template-areas, but that's just for simplicity's sake for myself. They don't actually have to match. The footer, you can call it Footer Mcfooterson. As long as you define the footer area as grid area Footer Mcfooterson, it should work.

[4:35] Let's give that a save and see what happens. Oh. Screwed it up over there. Got to make sure to close the navigation div. We can tell that the navigation area is the one causing problems.

[4:45] All right. Let's give this another refresh. Here we go. Now the header is spanning across the whole row. Then the navigation is in the second row with the content next to it. Then the footer is also spanning the whole entire row. Because we're using fr, it's also responsive.

[5:02] Usually, navigation bars are thinner than the content. Let's keep the navigation to one fr and set the content area to five fr. Here we have it, one of the most popular layouts created purely in CSS Grid.