- [Instructor] To create our third layout variation, we're going to add another media query at 900 pixels. So going down to the end of my CSS on line 39, I'm gonna do at media, in parentheses min-width 900 pixels, and add the brackets. So the links we still want over here on the left side, but since the columns are wider in this wide layout, we're only gonna have the links box span two columns. It's the same row as before, so we don't need to add CSS for the row.
So I'm just going to do links and then grid-column colon one span two, save and refresh, and we're not wider than 900 pixels, so I'll have to move the browser window. Now you can see that the links are only filling up two columns over on the left. Next we're going to move the content over to start in the third column. Back here in the media query, I'm going to do content and then grid-column colon three span seven.
It's gonna go seven columns across. Save. Go back to the browser and refresh. Now that main content goes across seven columns and there's space at the right for the ads. Going back to the code, I'm gonna add again inside that media query ads and then grid-column colon 10 slash span three, and then save. Go back and refresh. But now it's in the wrong row, so we need to bring it up.
Back over to the code for ads, we're going to add grid-row column three and save, and go back and refresh, and we have ads over there on the right in the correct place. Last we're gonna change the footer so it goes all the way across. Going back to the code, still inside the media query, I'm gonna do footer, and then grid-column one slash span 12.
It starts on line one and spans 12 columns. And go back over here and refresh. So now the footer's in the correct place. The last thing we're gonna do, we don't want the layout to go on forever for users with a super wide monitor, so we're going to give the container a max width. Going back over here, and this doesn't need to be inside the media query. So just dot container and then max-width 1200 pixels. The whole container will never be wider than 1200 pixels even if there's a very, very wide screen.
And go back over here and refresh. Now if you make it wider, it'll eventually stop getting wider when it gets to 120 pixels. Now we're done. We have a basic layout with 12 columns for three different viewport widths.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox