12-column layout for medium viewports

- [Instructor] Continuing on, we have the same layout and code that we finished with in the previous video. Looking at the layout, we would want to have a different layout when we get more space on the screen. Let's add a media query for what this should look like at about 600 pixels or wider. Going over to the code, I'm gonna go to the bottom of my CSS on line 22, @media, and then parentheses, min-width: 600 pixels so I'm targeting any viewport width where it's 600 pixels or wider.

We're gonna start to place the elements. We want the navigation to keep going all the way across, so that one is placed fine. Next, we want to have the links and the ads elements on the left side of the viewport. We're gonna have each of these be three columns wide. Using grid-column, we're going have them start at line one and span three columns. Inside the media query, I'm targeting the links class and then I'm gonna do grid-column, and one to start it out, and then span three. After that, for the ads class, I'm gonna do the same thing, grid-column: one slash span three, save, go back over here and refresh, so you can see on the bottom left, now they are three columns wide.

That's good, but we also want them to be directly below the navigation so the main content can go right next to them. We're going to use grid-row and specify that the row they start in is three and four, respectively. For links, over here on line 25, I'm going to do grid-row colon three, and then ads, grid-row colon four, save, go over here and refresh, and now they're placed directly below the navigation. Next, we're gonna place the content and footer elements.

We're going to have them both start in column four with grid-column four and span nine columns. Still inside the media query, I'm gonna write code for the content and also for the footer classes, and I'm gonna give them a grid-column colon four slash span nine, so starting at line four and spanning nine columns, save and refresh, so there they are next to the links and the ads. But we're also gonna add a little Flexbox here for the navigation.

We don't want the navigation to be stacked, since there's no space for it to be horizontal. I'm gonna go further down in the CSS, again still inside that media query, and I'm gonna do nav space U-L, and then brackets, and display: flex; save and refresh, so now they're in a row, but they're still all lined up on the left. We're going to use justify-content to horizontally align them in the Flexbox container.

A value of space-between means they will be evenly distributed along the horizontal space, with the extra space split up evenly between them. Going back over to the code, on line 36, I'm gonna add justify-content colon space-between; and save. Go back over here and refresh, and now our nav is spaced out along that line. So our layout looks great. In the next video, we'll add another media query and create a third layout for a wider viewport width.