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.4 Using Vertical Grids

Let’s switch things round and look at vertical grids. That’s right, the XY grid can arrange cells in both horizontal and vertical orientation, so let’s find out more.

2.4 Using Vertical Grids

Hello and welcome back to this course. In this lesson, you're going to learn how to use vertical grids. And as I was saying in our previous lessons, the XY grid allows you to arrange cells in both horizontal and vertical orientation. So we have this basic grid, that we've used in the previous lesson. Now one simple change will transform this horizontal grid into a vertical grid. First, let's remove this grid container because we're not gonna use that and let's remove these classes. So from this, if we set grid y instead of grid x, we go to a vertical orientation. And these cells will simply shift automatically to a vertical mode. Now in order for the cells to be sized properly, this grid needs to have a fixed size. So you would set it either inline here or with a class. I recommend with a class, of course, in the CSS file. But just setting a height of for example, let's say 300 pixels. Yeah, we'll set the grid to 300 pixels and the cells will resize accordingly. So for example, if I have a small six, and another small six, those two cells will occupy exactly 150 pixels in height. Because this is a vertical grid, you can use the classes of grid-margin y and grid-padding y to apply spacing to the top and the bottom of the cells. So grid-padding y will add padding inside the cells. And grid-margin y will add margins on the top and bottom of the cells, creating this space. Now if you want a grid that has 100% the height of the view port, you can use a component called the grid-frame. To use it, simply add the class of grid-frame to the grid. Of course, remove this in line height that we set, refresh, and that will create a grid that's 100% view port height or 100vh. Now auto sizing also works for the vertical grid. So you could have, for example, a cell that says small-6 and the other one just says auto. The result is going to be exactly the same. Small one, and now the first cell will occupy the height of one row, I guess you would call it, and the second cell will occupy the rest. Also, shrink works just fine, so you could say the first one to be shrink. So that's gonna occupy only as much height as it needs to, and the other one is set to auto. So it's gonna occupy the rest of the available space. Now the things you've seen so far are pretty great. But this new grid system has some unique features that make it absolutely fantastic, and that is horizontal and vertical cell alignment. We'll cover that in the next lesson.

Back to the top