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.1 Basics of the XY Grid

In this lesson you’re going to learn the basics of the XY grid. You’ll learn about the syntax, the auto sizing capabilities, offsets, and also about how the grid behaves on various screen sizes.

Let’s begin with the syntax.

2.1 Basics of the XY Grid

Hello, and welcome back to this course. In this lesson, you're going to learn the basics of using the XY grid. And you'll learn about the syntax, the auto-sizing capabilities, about offsets, and also about how this grid behaves on different screen sizes. So let's begin with the syntax, and that is super simple. There are three classes you need to know about, grid x, grid y, and cell. So you start by defining the direction of the grid, because this an x, y grid, so it's both horizontal and vertical. We'll cover the vertical grid in a later lesson. But right from the start, you should know that for a horizontal grid, you would need to use the class grid-x. For a vertical grid, you use the class of grid-y. So we start by defining a div for the class of grid-x, and then inside the columns, if you're used to that naming, the columns are now actually cells. So you will define an element with the class of cell. And inside, you would have your content, basically. Now, in order to create the proper size for that cell, you need to specify the number of columns it would occupy. If your grid is 12 column based, then if you set the size to 12 columns, it's gonna be full width. If you set it to six columns, it's gonna be half width. So let's set small-3. So what does that mean? Small-3 basically means that on small screens, as defined in the foundation break points, that cell will span 3 columns. If I say medium-6, it means that on medium screens that particular cell will span 6 columns. And if I say a large-12, it means that on large screens, it's gonna span on 12 columns. So inside I'm gonna say 3, 6, and 12, meaning the sizes for small, medium, and large. And then, if you wanna add another column, we can do that very simply, simply add another cell. Now if you've worked with the float based grid system before, even the one from foundation, you would know that you need to define a row first. So you'd have rows, and then in those rows, you would have columns. Well, that's gone here, the syntax is much simpler. You just define cells, you don't need to define any other rows. So cell, let's add another class, small-8, let's say, medium-6, and large-12. So that's gonna be 8, 6, 12, right? So now if we take a look at our page, you'll see that on large screens, both of these cells span the entire width of the page, because they go on 12 columns each. But if I go into Responsive Design Mode here, and I switch to, for example, a medium screen, you'll see that we have equal width cells on medium screens, just like you see here. And if I go even further down, we have the first cell, which is equal to 3 columns, and the second one, which is equal to 8 columns. And the nice thing about this grid is that you can add as many cells as you want. So for example, if we were to duplicate these and do a refresh, those cells will simply stack one on top of the other. You can see them here. So it's no need to define a row that will hold those particular cells. It's a much more simple syntax. Now because this grid is based on Flexbox, it has a very interesting feature, and that is cell auto-sizing. Which means if you add the class of auto to a particular cell, it's just gonna take up the rest of the space. So in my case here, if I have a cell that, on small screens, has a width of three columns, and I set this second one to auto. If I do a refresh, this second cell will just take up the remaining space. And I can modify this, for example, small-5. Now this cell will be made bigger and this one will auto resize accordingly. I can even make it small-11, and that's gonna take up the remaining space. You can also use the small, medium, and large classes to define the auto. So for example, if you want, let's see, small-3. If you want on small to be 8 columns, but on medium you want it to be auto, you can do that as well. And that's gonna give you this result on small, and on medium, it's gonna give you this result. Pretty awesome stuff. Also, if you have multiple expanding cells, well those cells will share that space that's left over equally. So for example, I can set a div with a class of cell, and autox3. I can just set the text here to auto, let's actually comment this. If we take a look, you will see that you now have three cells of equal width, pretty awesome. Now opposed to auto, a cell can also shrink, which means it'll only take as much space as its content needs. So if I were to set one of these cells to shrink, well, that cell will just take as much space as the word auto occupies. The rest will just expand to the available space, very useful stuff. And just like auto, you can select the size of the screen for which you want to apply the shrink. So for example, if you just wanted a shrink to happen on, let's say medium screens, you can do medium-shrink. But on small, you want to make it auto, you can just say auto, medium-shrink. So on medium, that's gonna shrink, but on small, it's gonna revert back to auto. Finally, you can add offsets to your cells, and that's happening by adding margin-left to a particular cell. You can achieve this effect by using the class of offset, followed by the number of columns you want to offset. Let's create a new cell. Let's say that I want it to be small-6, but also offset by 3. So if I do a refresh, and actually let me just specify the screen size for which we want to apply the offset, right? So that's gonna create a cell with a width of six columns, but also an offset of three columns, so it's pushed to the right. And if I push it, I say small-offset-6, it's just gonna be placed in the second half of my page, just like this. And of course, this offset class works for small, medium, and large screens. And with the basics covered, let's move onto more advanced functionality for this grid. And we'll continue with the grid container and block grids. That's coming up in the next lesson.

Back to the top