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.3 Using Grid Gutters and Collapsible Cells

In this lesson we’ll cover how to use grid gutters. Let’s begin.

2.3 Using Grid Gutters and Collapsible Cells

Hello and welcome back to this course. In this lesson, you are going to learn how to use grid gutters. And a gutter is the distance between two cells. Now you can create that distance in two different ways, either by using a padding on each cell or by using a margin on each cell. I'm sure you know this, but margins basically apply space around an element. Paddings apply space inside of an element. And foundation actually turns off the grid gutters by default. You can add them later by yourself if you want to. And there are four classes you can use to do this. First of all, to add margin or padding on the horizontal direction, you can use the classes of grid margin. So grid-margin-x, and grid-padding-x. To work vertically, you simply replace the x with y. So grid-margin-y and grid-padding-y. Let's see what kind of effect these classes have on our grid. So we have a simple one here with just three cells. One is three columns, one is four, and the other is five. So if I were to add the class of grid margin x, when I'm gonna refresh this, you'll see a small difference. You'll see the gutters. It's really subtle because I'm not using very bright colors here, but you should be able to see them. Let me actually change the opacity of these elements. By adding a margin, we have this extra space to the left and to the right of the cell. What you see with gray is the actual grid, the grid background. And what you see with blue is the background of a cell. So we have padding here, padding here. And of course, when we have two adjacent cells, that margin, excuse me, not padding, that margin combines to create a full gutter like this and like this. Now what happens when we set grid-padding-x? Let's create yet another grid so we can see the difference between the two. So with the padding, we have padding applied inside the cell. We have padding left and we have padding right. So that's the difference between the two. Now you can also use these together. So you can have mark grid-margin-x and grid, padding-x, and that will apply both margin and padding to the cells. Now I was saying in the beginning that you can use the grid-margin-y and grid-padding-y classes to add margin or padding when working with a vertical grid. But you can also use them when working with the horizontal grid. That will simply add padding or margin on the top and bottom as opposed to on the left and right. So by adding grid-padding-y, the cells will get a padding on both top and bottom. And let me actually delete this grid here so it's less confusing, yeah. So now we have padding top and bottom. If we also add a class of grid-margin-y, we're also gonna have margin on the top and bottom. If we're gonna take a look in the inspector, you'll see that each cell has margins and paddings of 15 pixels on all directions. Now what if you just want to use gutters on specific screen sizes? So for example, maybe show gutters on small screens, but remove them on large screens. Well, that's really easy to do. You can use a class called margin collapse, and also padding collapse. So let's keep this very simple by just using grid-margin-x. All right, and our grid currently looks like this. Now this will apply the margin on every screen size starting with small and up. But if you want the large screens to not have that margin, you simply say the screen size, in our case large, then the gutter type raise in margin and then collapse. Yeah, and you'll see that on large screens, we no longer have that margin, but if we go to small screens and up onto large, that means small and medium, we still have a margin. Once we get to large, that margin disappears. Same goes for padding. So if I were to use grid-padding-x, I will also need to specify a large padding collapse. That's gonna have the same effect. Let's do a refresh. And you'll see that on small and medium screens. We have padding within the cells, and on large screens, that padding is removed. And that's how easy it is to work with grid gutters. Now the xy grid gets its name from its ability to use grids in both argumentations, vertical, horizontal and vertical, right, x horizontal, y for vertical. So in the next lesson we're going to have a look at how we can work with vertical grids. That's coming up.

Back to the top