0:00 We have our single column layout working on a small screen size. Next, let's make this happen. At some break point, I don't know what it will be, maybe 700, 800 pixels. It doesn't really matter.

0:11 We're going to go to a two column layout where the header will go all the way across both columns. The nav bar goes across both columns. The sidebar is a one column piece. The main article content is one column. Advertising is one column. The footer is one column.

0:26 By the way, if you're wondering about the heights here, we could define rows and give explicit heights. I'm not going to worry about that because a lot of the time you just want your content to determine the height. However, the height here of this main article, it is bigger than everything else. That's just because I gave it a height.

0:43 If we look at the content here, I gave it a height of 400 pixels. If I got rid of it now, it's just the size of the content. Going back to the finished version, what we want to do is define a two column layout.

0:57 There's many ways of doing this. We could do three columns and have this take up two columns here. This is two columns, but the easiest option is just to do two columns. That's all I need. One small column over here, one big column on the right.

1:12 That's exactly what I did in this solution. If we look at our grid layout dev tools that turn this on, hopefully you can see the two columns. Here's the left column. It's much smaller. Here's the right column. It's a lot bigger. That's what I'm going to do on our version that we started in the previous video.

1:31 Once we hit 700 pixels -- I'll just write a basic media query -- @media with a minimum width of 700, 800 pixel, something like that. Once we hit that screen size, I'm going to style my container.

1:45 It still will be display of grid. Grid gap will be the same. However, I'm going to now say "grid-template-columns". I want two columns. I'm going to have a small one and then a bigger one. We can play with these ratios. I'm not going to set pixel sizes or anything like that. I'm just going to use fractions.

2:04 A bigger three fraction on the right and a smaller one fraction column on the left. Now, this kind of messes everything up because I need to reorder and reassign my grid template areas. Everything is jumping into this left column because if we look at grid template areas, I've said that there's only a single column. That's not true anymore. Now we have two columns.

2:27 The desired output or the desired result is to have the header go all the way across. The nav goes all the way across. Let's start there. If it's just two columns, it's as simple as saying "header header", "nav nav". Then, we have sidebar in main or content. They're supposed to be splitting the space so I'm going to rewrite it as "sidebar content". Then, ad and footer are supposed to split a row, as well.

2:56 That's all I should have to do to get this layout. There we are. We go from a single column to two columns and our elements reorganize within those two columns. Some of them share the space. Some of them take up both columns.

3:10 Technically, we're slightly off from the solution because I got rid of that height. Let's just add that height back in. It doesn't make a difference at all. It just makes our main article bigger. Next, we have our final break point here. We're going to reorder things a little bit more.