12-column layout setup

- [Instructor] One of the great things we can do with CSS Grid is use it for layout instead of one of those many layout frameworks that have been so popular the last few years. Although frameworks can be useful, the way they've been used to build Grid type layouts tends to create a lot of extra, and unnecessary code. Now that CSS Grid is available to us, it's much easier to create your layout directly in CSS. In the next three videos we're gonna look at how to create a 12 column responsive layout. That doesn't mean that users will see 12 columns on the page it means that the layout is visually based on 12 columns which can be grouped together to create wider columns.

This is a classic graphic design technique that gives a visual structure to the page. Going over to the code, we're going to start out by designing for narrow view port. So I'm gonna make the window a little bit narrower, and we have a div with a class of container surrounding everything, that's on line 15. We have a header element on line 16, a Nav element on line 19 with several navigation links in it. Going down further to line 38 we have an article element for the main content. Line 42 an aside for some links, on line 45 another aside for ads, and then on line 48 a footer element.

The first thing we're going to do is give the container class a displayed grid declaration. So going back up to the style section of my code on line nine I'm going to do for container, display grid, save, go over here and refresh and I don't see any changes. But if I turn on the developer tools, I can see that I have a grid here. We can get that out of the way, but leave it turned on and then to start out our 12 column grid, I'm going to go back over to line 11 of the code and do grid-template-columns and here I'm gonna create the columns.

I'm gonna do repeat and then parenthesis, 12 columns, 1fr and then save, go back here and refresh. So now you can actually see there's 12 columns here they're equal width unless there's content that makes them wider, and this is actually gonna turn into something that looks good, don't worry. We're gonna go back to the code and give them a grid-gap of 10 pixels, so I'm gonna do that on line 12. Grid-gap, 10 pixels, save, go over here and refresh.

So now I have a little space between the grid items. Our six elements are in the first six columns to start. These two are a little bit wider than the others to contain the content but that won't be a problem once we start placing the elements in the grid. We're gonna format the navigation element of it first, giving the nav ul a list style of none to get rid of the bullets and then margin and padding of zero to get rid of the space where the bullets would have been. So back in the styles on line 14, I'm going to do nav ul, and then list-style: none.

Margin zero and padding zero save and refresh. Now I just have a list of links, next we're going to lay out the content for narrow view port width. Going back over here to the code in line 19, I'm going to add for container and then the greater than sign and then an asterisk. So this is targeting all the elements that are direct child elements of the container, and the styles I'm gonna add are grid-column: 1 / span 12 and that means for each of those child elements it's gonna start on line one and span 12 columns, save and refresh.

So in now each of these elements spans the full width of the grid, that's perfect for our narrow view port width. This is a great layout for mobile, goes right down the screen in order, in the next video we'll look at how to change the layout for wider view port widths.