"How to Make a Website" was retired on March 24, 2020. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Modular CSS with Sass

Well done!

You have completed Modular CSS with Sass!

Sign up for Treehouse Back to Library

Building the Grid Container

3: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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up