0:00 It's time for another exercise. This one's a bit more complex than the previous exercises. I'm asking you to build a simple page layout using everything we've learned so far. This is what you'll see, the initial starter code. We've still got our...Instead of a 5x5 grid, we now have a 5x4 grid. If you look in the no touching zone, you can see we have five columns 1fr each, four rows, 1fr each.

0:26 What I'd like you to do is take these individual pieces of content -- we have a header, a nav, article, advertising and footer -- and create this layout here. You won't need to touch the grid itself, the parent container. All the code you need to write is in each individual grid item like the header, the nav, the article, the ads, and the footer.

0:48 I've already given them a background-color. I just want you to recreate the layout that we see here. The header will span all the way across. The nav spans three different rows. The article spans three columns, two rows, and so on. I'd like you to recreate this layout.

1:04 I've made the colors transparent, by the way, so you can still see what's happening behind the scenes where I've drawn the grid in. That just makes it easier so you know how many tracks each thing takes up. You can see this is three across and two rows.

1:20 You can use any of the short hands. You can use a long hand to do grid-row-start, grid-row-end, and grid-column-start, grid-column-end, all that stuff. It doesn't really matter, as long as you recreate this layout.

1:31 Again, no touching the HTML. There's nothing in there you need to touch. You don't need to touch any of the styles up top. All you need to work on are the individual items in the grid.