0:00 It's time for another quick exercise. I've predefined a simple layout, I don't know if it's nice, but a common layout where we have some stuff splitting a single row and then a footer going all the way across.

0:13 We don't need to touch any of this, but if you look at the container styles, we have a three column layout. A one fraction, a two fraction, and a one fraction.

0:23 Here's our middle column. It's two fractions. Here's our smaller columns on the left and the right. Then, we have two rows, a two fraction row and a one fraction row. A wider row or taller row, and then a shorter row.

0:35 I'm using grid-template-areas to position my elements around. I have ad, main, aside, footer, footer, footer. If you look at our index.html, you'll see there's a couple of boxes. A div with the class of ad, a main with the class of main, aside with the class of aside, footer with the class of footer. They're all in the container.

0:58 The problem that we have, or what I'd like you to do, is take our current version that looks like this on all screen sizes, including on a really small size like this, where it starts to look quite bad. I'd like you to, instead, implement this. Make it responsive so that the grid reorganizes at 700 pixels and below, which is what I've written in the CSS file.

1:22 You don't need to touch anything up top. There's a lot of stuff with the grid. You don't need to touch any of it. I'm defining the grid template areas, defining the columns, the rows, assigning the grid area names. All you need to do is write the styles to adjust our grid at sizes below 700 pixels.

1:39 When the whole screen is below 700 pixels, notice what happens. The content now takes up more space. The ad moves down below. The footer shrinks.

1:50 I'll leave you with this. This is what it currently looks like at 701 pixels. I want it to look like this instead. You'll need to write a media query and adjust grid-template-areas.