Check out a free preview of the full CSS In-Depth, v2 course:
The "Align and Justify Items" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle demonstrates how individual items can be justified and aligned based on the grid line, row track and can stretch or shrink to the content inside.

Get Unlimited Access Now

Transcript from the "Align and Justify Items" Lesson

[00:00:02]
>> Estelle Weyl: Let's move along and talk about alignment. This is gonna be very similar to what we talked about with flex-box yesterday. We have several properties that are on the parent, including justify items, align items, justify content, align content, grid auto columns, grid auto rows, grid auto flow and grid.

[00:00:21] And then we have justify-self and align-self, which are properties on the grid items themselves. So justify-items has a few new values that we never heard of. One of them is legacy and then two or safe and unsafe, and I'll go over those in a minute. The default is actually legacy, which is left.

[00:00:52]
>> Estelle Weyl: Justify, that's what it comes out to, so I don't think that's actually what it means, but that's what it ends up being. I guess it would be right in left-to-right languages. So justify-items, it aligns items in the inline direction, which for us is horizontal. Let's just go and do it by example.

[00:01:24]
>> Estelle Weyl: So
>> Estelle Weyl: When we were doing flex-box, we sometimes aligned the whole row and we sometimes aligned just the item. So when it says, justify-items, it's actually taking that grid item and aligning just each item individually. It's doing it globally to all of them but it's individual within each item, putting it at the end.

[00:01:51] Here were can put it at the start. What are the other values we have? We have stretch, and we have center, and we have self end. So let's do center.
>> Estelle Weyl: Now the thing is, this stuff is really ugly and I've never used this property because I've never needed to do this cuz I don't find it attractive.

[00:02:16] But it is important to understand that it's doable.
>> Estelle Weyl: So the new values or safe which means if it overflows the container if it tends to over align the container then you actually still show the content and unsafe is basically says you're gonna crop it. So legacy is basically you can inherit legacy left center or right and that's about it.

[00:02:44] Then we have a column alignment which we do with align-items. We did justify items, which was kind of left to right in left to right languages. Here if we do flex
>> Estelle Weyl: Start, which you'll notice that the flex property is the same thing as it was in flex, right?

[00:03:07] We can do flex-end. So it's aligning each item within its grid line, right, along the road track. The previous one did along the column track.
>> Estelle Weyl: Stretch
>> Estelle Weyl: Is nice. I think that's the default. I forgot to highlight which one is the default but I'm pretty sure it's that.

[00:03:42]
>> Estelle Weyl: There's a property called place-items, which is basically align-items, and then justify-items. It's just a shorthand. Realize that the order does matter. You have to put align-items first, and then justify-items. If you only put one property there, if you just include the line items, it'll be that value will be given to justify items as well.

[00:04:07] So let's play with making this hideous just for a minute. So we have align-items,
>> Estelle Weyl: Which is aligning items,
>> Estelle Weyl: Within its column, right? That's what justify-items does left or right or center. Horizontally, and then line items is vertical. So here we put it at the top, here we put it at the end.

[00:04:48] Here we stretch it. But notice, even though it's stretch in the height It's still at the flex-end. And we can center,
>> Estelle Weyl: And center.
>> Estelle Weyl: Now, you might wanna actually create this effect, I don't think you do. I don't use these but, it's important to know that they exist, right?

[00:05:18] When would you use this? So remember that example with the unicorns? And it was a unicorn, and then a paragraph, and there was space, and then there was a button at the bottom? You would just put the button at the flex end. But the way we did it before, when we did it with the flex items, we put the image, and then we put the button in the third item, and then we allowed the middle one to grow, and we didn't allow the first one or the third one to grow.

[00:05:52]
>> Estelle Weyl: Okay.
>> Speaker 2: Quick question.
>> Estelle Weyl: Yeah.
>> Speaker 2: If we're using legacy, how do we declare that it can hire it?
>> Estelle Weyl: You don't even have to use. You can just omit it, it's legacy.
>> Speaker 2: Okay.
>> Estelle Weyl: Yeah. Basically you just have to overwrite legacy, if you want something else.

[00:06:10]
>> Speaker 2: All right.
>> Estelle Weyl: That's a default value.