Building the Grid Container3:41 with Guil Hernandez
Now we're going to build the grid container module. This will contain our columns, give our layout a max-width, and keep it centered in the browser.
So in our index.html file, I've gone ahead and 0:00 added the grid column classes, to many of the html elements. 0:03 So for example, we're giving our header the class grid_col--12, 0:07 we're also giving our hero image the class grid_column 12, 0:12 we're giving our typography, the class grid_column 8, and so on. 0:16 So next, we'll build the grid container module, that contains our grid columns, 0:21 and we'll keep our layout at a max-width, and nicely centered in the browser. 0:26 So in our gridcontainers.scss partial, 0:32 let's create our grid rule by first writing the class grid. 0:37 And the first thing we'll wanna do is extend the clearfix helper, 0:43 that way it'll clear all the floated columns. 0:47 So we'll say @extend, %clearfix. 0:49 Then we'll also want to extend, the centred helper class. 0:55 And as we can see this is used to center elements on a page. 1:00 With a margin-left and margin-right value, of auto. 1:04 So again, we'll say extend centered, and 1:09 lets give our grid container a width of 90%. 1:14 So next we'll also want our grid to be nestable. 1:19 So let's write the styles for that. 1:24 So first, I will write a comment that says, Make nested grid container 100%. 1:25 That way if it's nested instead of being 90%, it will be 100%. 1:32 So I'll create a new selector, 1:37 that targets an element containing grid call in its class. 1:40 So we'll use an asterisk. 1:45 And we'll say, contains grid__ column. 1:46 And then we'll use the direct child selector, and 1:54 an ampersand, to reverse the nesting order. 1:57 So now the selector will target grid containers, inside columns. 2:00 And inside, we'll go ahead and add the width property, with the value of 100%. 2:07 So next, we need to give our grid a max-width. 2:13 That way it doesn't get too wide. 2:19 So let's add a comment for that. 2:21 We'll say set a max-width, for grid container. 2:23 So now we'll need to define a media query. 2:32 So we'll say @media. 2:34 And at a min-width of 1100 pixels, let's set the grid's max-width, 2:40 to be that g container max-width variable, which is currently set to 1050 pixels. 2:45 All right so let's go ahead and save our grid container file and 2:55 let's take a look at the preview. 2:58 So, back in the preview, when we refresh it we can see that our page is now laid 3:01 out with our grid system, and if we need to center any of these columns so 3:07 for instance, our typography column here. 3:12 Well, we can simply include the centered helper class, 3:15 right before the grid column class. 3:19 So in our typography grid column here, 3:21 again, right before the grid_col--8 class, we'll write the class, centered. 3:25 And now when we take a look at it again. 3:32 We can see how our typography column, is now nicely centered in our layout. 3:35
You need to sign up for Treehouse in order to download course files.Sign up