2.5 How to Align Grid Cells
Welcome to the final lesson, where you’ll learn how to align content horizontally and vertically by using the XY grid. Let’s face it: sometimes, aligning two or more elements in CSS can be a real pain, especially when the content doesn’t have a fixed width or height.
As the XY grid is based on Flexbox, it can benefit from certain helper Foundation classes created specifically for aligning elements. Let’s check them out.
2.5 How to Align Grid Cells
Hello, and welcome to the final lesson of this course, where you'll learn how to align content by using the x y grid. And let's face it, sometimes aligning content in CSS can be a real pain, especially vertically, when trying to align it vertically, and especially when that content doesn't have a fixed width or a fixed height. Well because it's based on Flexbox, the x y grid can benefit from certain foundation classes that were written specifically for aligning flex elements. So, let's check them out. First of all, how do you align elements horizontally? If we take a look at our code here, we have a grid-x and two cells. The grid-x is a flex parent. A cell is a flex child. And by default, these cells are aligned to the left. If we want to align them to the right, we would simply add the class of align:right to the flex parent, which is the grid itself. And these will now be aligned to the right. If we want to align them in the center, simply say align:center. And that's gonna align them to the center. We can also justify the content. So justifying the content basically means if we have two cells, these will be aligned. One on the left edge, one on the right edge. The class for that is align-justify. And that's gonna produce this result. This is particularly good, or actually it's perfect, for nav bars which have logo on the left, navigation on the right side. And then, if we add another cell in here, it will simply be placed in the center. Also horizontally, we can use an alignment that will align items to the space around them. So for example, it's called align-spaced, first of all, and it does the following. It basically distributes these elements so they have an equal amount of space around them. So if you notice, the space on the left is half of the space on the right here. If we're gonna stick with only two cells, that space will be increased. Now, if you're a little bit confused of the difference between align-justified, which is this, and align-spaced, which is this. And let me actually create a second example here so you can see the difference, yeah? So this is, the first one is justified, the second one is spaced. Now, align-justify will basically evenly distribute the space between each cell. And by doing that, it aligns the first and the right to the edges. The align-space, or the second option, will basically evenly distribute the space around each column, not in between each column. So that's why you see there is also space to the left and to the right of the first and last columns. Now, what about vertical alignment? Well, that's also easy to do. You can align elements or content at the top, middle, bottom. Or there's a fourth option called align-stretch, which will basically create the same height on all the elements. So to show that really quick, let's get rid of this first, the second grid. And I'm gonna delete the line justify there. Let's create a text, a small text here, and a larger text here. Right, so this is the default behavior for vertical alignment. And that's the align-stretch option that I was telling you about. All of the cells have the height of the tallest cell. In our case, the first cell has the exact same height as the second cell. But if we want to align this cell with this cell to the top, we can simply set align-top. And as you can see, the height of this cell is now only the height of its content. If we want to align this to the middle, we can simply replace this with middle. And that's going to be vertically centered. Same goes for aligning this at the bottom. And that's going to put it at the bottom of the element. Now, this approach works with all of the cells. So align-bottom is applied to every single cell. If we want to align these cells individually, we need to use an align-self class. So we need to remove the alignment class from the parent. And then, we just add it individually to each cell. So for example, align-self, sorry. Maybe we want this in the middle. Maybe we want this also in the middle. And also, let's create two other cells here. And let's set this one on the top and this one on the bottom, right? So that will align the first cell to the middle, second one as well, third to the top, fourth at the bottom. You can also use the stretch class, and that will make the fourth cell be as tall as the second one. And finally, I want to show you another very interesting feature which aligns all children to the middle, both horizontally and vertically. And that's really easy to do. Let me just quickly duplicate this grid here. And then simply remove all of these classes. And then, to make this happen, you simply go to the parent, to the flex parent, and you say align-center-middle. And that, let me actually comment this so you can see it better. That will align everything in the middle. Also, what I'm actually going to do is remove one of these cells, and also set a height. This is just for demo purposes, of 300 pixels to this grid. Let me just remove some of this content. Okay, so by doing that, we have aligned all of the cells both vertically and horizontally within the grid. And if you even go a step further and you set this to be 100 [INAUDIBLE] height, you can align these elements right in the middle of the page. And that's the new x y grid from foundation. I hope I gave you enough information to get an idea of what this grid can do and what you can use it for. In my opinion, it's a great addition to the framework. Thank you very much for watching this short course. If you have any questions, please post them in the forum under courses and tutorials. Until next time, I'm Adi Purdila. Take care.