Alignment & Justification

[00:00:00]
>> Kevin Powell: Now with grid, we also have these other new parts that come up. This is with layout in general, we're going to see these with flexbox as well. We have alignment and justification that enters the scene. And alignment and justification are interesting. If you're going to use them, always use your grid inspector so you understand what happens. There's even little shortcuts. I'll try and remember to show you the tab for those when we're in here, but I'm going to show you why you want to pay attention to them.

[00:00:26]
So this is going to be on the parent itself. So this is a parent with a whole bunch of children on there just to give us a grid that we can visualize. And on here, I'm going to do a... Uh, sorry, I was going to write it with grid, but we have align, we're going to start with the items. So we have two properties, align-items. And we have a justify-items that we can use. When we're talking about the items, we're looking at how the items are positioned within their cell.

[00:00:59]
I'm going to put a, let's do an end on this, just for fun, and they sort of move around and it looks really broken. It's kind of confusing what's just happened. What's actually happening here makes a lot of sense when your grid inspector is on and you can visualize your grid. So, I'm going to turn that on. I'm actually going to dock my dev tools off screen just so they don't take up any room. We can see our grid.

[00:01:27]
Now let's turn off that end again. I'm going to lose my grid, aren't I? Oh no, we still see it, good. So, I see each one of these has its own cell. When I do justify-items end, it's pushing them to the end of their cell, it's like a text-align end where they have their space, instead of stretching the space to fill it all, they're just getting pushed all the way to the end of it. We can also say that it's start.

[00:01:51]
They moved to the start. You can also say center, and they'll go to the center of their cells. I don't do this terribly often, but we're going to see a use case for it in a minute, and it's just really good to be aware that this type of manipulation can happen. Justify-items, you just have to remember justify is on our inline axis. And then we have, I'm going to just turn it off for now, but that's our inline axis, and then we have align-items which is in our block axis, so we're dealing up and down, same thing, I can say start, they're all going to move up to the top.

[00:02:26]
I can say end, they all move down to the bottom. I can come in with a center and they will become centered. So the important thing to remember with grid: items means how are the items getting set up within their cells, and if we don't see their cells without the grid inspector, the positioning can be really strange. So align-items, justify-items. Very important to remember, it's the item's placement within the cell.

[00:02:53]
The reason I'm repeating that over and over again is because we have another set of properties which are justify-content and align-content. When we have those, they seem a little strange at first because if I were to use them right now, nothing would actually happen. If I say end, that won't change. I say center here, nothing is actually changing. When we're talking about items, it's the alignment of the item itself within the cell that it has.

[00:03:28]
When we say content, we're selecting the content. That means we're taking the whole grid and we're deciding how that grid is being positioned. The problem right now is the grid is within its parent, and it's taking up the room it's taking up. So if I look at the height of it, the height is being defined by the parent. So if I do something like an align-content center, that would be align-content, it's aligned, so it's up and down.

[00:03:53]
And I can't really center if it's already taking up all the space. I would need it to be shorter than the parent to be able to align the content vertically. So I'm going to use a viewport unit here. If you've never seen viewport units, just don't use them and you'll be fine. They're a super dangerous unit. It's basically saying it's 70% of the height of the space available. They're very... They get people in trouble a lot of the time.

[00:04:19]
My general rule of thumb is don't use them, but for demos like this, they can be helpful. So here now, if I turn off this align-content center, the grid is stretching to fill that parent that I've just made taller, but now I can say actually I want that content to be centered, and it's going to center the grid within the space that it had available. It's one of the reasons we don't use it much, because it's not often you have a height on your parent to be able to center the grid within.

[00:04:44]
The same with justify-content. Right now, my rows or my columns are filling up all the space, so I'm going all the way from the left side to the right side, so I can't move around within that space. I'm filling all of that space up. But it might happen that instead of 4 1fr, let's just say 4 100 pixels, which might break the layout a little bit. Okay, not too broken, so we can use it. Now we've actually pushed, we've grouped all the content and pushed it over to the side.

[00:05:14]
The default here is actually start, I believe. If we remove that, our grid will line up on the start side. If they're too small, we actually saw that a bit before when we weren't paying attention to that, but you can align to the start, you can also do a justify-content center and you can center all of the content within that space. These also offer a few extras, and these are ones you don't want to memorize.

[00:05:36]
Even the align-content, justify-content, you're going to start using them, they're going to start sinking in, you're going to mix them up, you just switch to the one that actually does work, but the alignment and the justification, but don't memorize these, just know they're possible, and then when you look them up when you need them. But we also have a space-between. You use this a lot more flexbox where it puts one element all the way on one side, the next, or sorry, one column on one side, the other column on the other side, and then it equally distributes the space between the other columns.

[00:06:14]
We can do a space-around. It spaces around each item and there's a space-evenly as well. You will not use these too often with grid. You're going to use these a lot with flexbox though, so it's worth talking about it, but just wanted to sort of throw those in there. The alignment ones are where potentially you use more often because moving things within a cell can be quite useful. And there's one last thing that I will talk about when it comes to the alignment and justification.

[00:06:41]
I know it's all kind of weird, so don't feel, if you've never used this and it's like, oh my goodness, there's a lot to learn, don't stress too much over it. But there is one other thing that we can do here, which I'm going to go on my red one here. Let's give that a class. Child 2. And we'll select it. I already had it there. I don't want to get into any child right now. So we're going to say... Uh, what did I just call it?

[00:07:15]
2. So we can select our 2, and I'm going to say that this 2 is maybe not the best one actually, we should do 4. Great, 4 there, so we can select that one as well. 4 and we have within we have alignment justification, we can do a justify-self start and just position that one element within a cell. This is probably the most common use case for using these with grid in my own experience, and I can do an align-self and it will push that all the way up to the top and you can use both of them.

[00:07:50]
So I can say a justify-self and you can sort of position something in a corner or something like that, if you need to. So aligning one element instead of all the elements probably ends up becoming a little bit more useful in the long run of what you'll be using the most often.