Preview
Video Player
00:00
00:00
Building the Grid Container
3:41Now 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