7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 The Grid Container and Block Grids

In this lesson you’ll learn about the built-in grid container and also about a neat feature called “block grids”. Let’s begin!

2.2 The Grid Container and Block Grids

Hello and welcome back to this course. In this lesson you are going to learn about the grid container and a pretty handy feature called block grids. Now, what's up with this grid container? Well, by default, and you saw this in the previous lesson, the grid will expand to the full width of its parent. In our case, it was the body. So it was filling the entire width of the page. However, if you want to contain it, you can use the class of grid-container. So you would start by saying, div class grid-container, and inside grid-x. And let's say cell, let's say small-3. Let's duplicate that and the result is this. So as you can see the grid no longer fills in the entire width of the page. Instead, it is contained and it is centered in the page. Now, by default, this container has a maximum width equal to about 1200 pixels. And if the screen width goes below that, it's just gonna be flush with the page. Now if you want to change that value, you can go to the CSS file. And when I open mine right here, CSS foundation.css, and you can simply search for the grid container, yeah? And you'll see its max width to 62.5 rems, and it can change this to whatever you want. If you want it to be 32.5 rems, you can do that, and the grid will automatically adjust. If you want to set it to 100%, you can do that as well, and it's gonna fill the entire view, the entire width of the page. Now if you're using the SASS version of the framework, there is a variable in the settings SASS partial that controls this value. And that variable is called, max-width. Now as I was saying, if we're dealing with screens, there are smaller than those 62.5 rems, then the grid will be flush to the size of the page. Let's actually see that, if we're gonna scale this down, Yeah, you will see that the grid now is flush with the size of the page. Now in this case, if you still want to have some padding on the sides, you can add the class of grid-container-padded. And grid-container-padded simply adds having left and right of about one rem. So we're gonna add a class here, grid-container-padded. We're gonna refresh, yeah, and it's just gonna add a small padding on the left and the right side. And that's it for the grid-container. Now, let's move onto block grids. Now block grids is a pretty useful feature, because it allows you to specify the width of the columns inside the grid at a block level, not at a cell level. So in our example here, instead of saying small-3, now I'm just gonna remove this, and I'm gonna say small-up. And then I have to specify how many columns do I want to display per row of columns, or in a particular direction. So I'm using a grid-x, I'm working horizontally. And if I say small-up-4 for example, I am saying that look take all of these cells, give them the exact same width, and display them 4 in the horizontal direction. So the result of that is this bit. If I want to only display 3 per row, I can set small-up-3. And that's gonna display these columns as group of three. Same thing if I want to display them as two columns, I can do that as well. This is super simple, you can create grids so much easier with this. So for example, if I have like let's say a bunch of cells here, about these much. And I wanna grid that has the exact same width for each of it's grid cells. I can simply specify, look I want each cell to be displayed as a third of the available space. Well, I can do that very easily. Maybe on medium screens, I want these to be displayed as fourths. And maybe on large screens, I want these to be displayed as sixes. So here it is on a large screen, now we have one, two, three, four, five, six. Then on medium screen it's gonna go to four, and on small screens it's gonna go to three, just like this. And that's it for the grid-container and block grids. Now, the examples you've seen so far did not have any kind of gutters or space between cells. And that's because they're turned off by default in this new grid system. Now in the coming lesson, you'll learn how to turn these gutters back on. See you there.

Back to the top