Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
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 Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up