0:00 Finally, we're going to add in the larger screen size layout, which looks like this right here, where the header goes all the way across, the footer goes all the way across, but then we have three columns now instead of two. We have our nav taking up a column. We have our main taking up a column, and then we have the sidebar and advertising taking up a column.

0:19 Of course, these columns are not equally sized. As I talked about a little bit in the previous video, you could always create a grid that has evenly sized-columns. This might take up three columns, this is one, this is one. We can do that, or I just make the columns uneven. I make a small column, a big column, and a small column. That's what I'm going to do right now.

0:41 At this breakpoint, wherever we want it to occur, let's say at 1000 pixels or so. I'm going to go to a three-column layout. I'm basically just going to duplicate what I already did for the 700-pixel breakpoint and update it. Maybe I'll do 1200 or something.

0:59 I'm going to go to a three-column layout. Now, as soon as I do this, it will diminish the size of this middle column, if I keep it at three fractions because previously, we had four total fractions. Three of them went here. One of them went here.

1:16 Now, if I do one-fraction, one-fraction, three-fraction, we have five total fractions. Three-fifths in the middle. I could increase this to just make it a little bigger because now we have six. We're dealing with four out of six fractions for this middle content. We can play around with that size. Either way, I'm making a small column, a big column, and a small column.

1:40 Now, I want my header to go all the way across. If we look at the solution, header goes all the way across, footer goes all the way across. We know, "header header header." I'm going to want, "footer footer footer." Then we have nav, main, sidebar, and advertising.

2:02 Things change up a little here. Our nav is a single column that takes up two rows. I'm going to restructure it like this, where we have "nav" and then right below it, we have "nav" again.

2:15 Then next to nav, we're going to have main, I think I called it content, and then we have sidebar in this far right column and add. Is it ads or ad? Just singular ad. Just like that.

2:34 Visually, hopefully, you can look at this and see why I'm making those changes. Oh, this shouldn't be here. There we are, "header header header," all the way across. "Nav content sidebar," "nav content ad." This is "nav content sidebar," "nav content ad," and then, "footer footer footer." It goes all the way across.

2:55 Let's look at our version. Here it is. We start with one column, we expand to two columns, and then we go to three columns. Again, they're not evenly sized columns. If I wanted to tweak how much the space is divvied up between them, here's what it would look like if I did one-fraction, three-fraction, one-fraction.

3:16 I guess it's hard to tell the difference, but there is a difference there. If I instead did seven fractions in the middle, that makes our main content a lot bigger, and then these other elements much smaller. You can always play around with that. You can also work with minimum sizes and everything we've learned so far. I'm going to stick with one, four, and one.

3:36 Just a simple example, but imagine how many different layouts you can build instead of colored boxes, of course, with real content, but the grid concepts are exactly the same. Whether you're working with real content on a web page or colored boxes, you can reorganize, resize, and dynamically add and remove columns depending on screen sizes.

3:56 It's not just going from one to two columns. It's going from one to two columns where our elements move around. Same thing when we go from two to three, we're reshaping where things live within the three-column grid. That's it for this simple layout example.