Check out a free preview of the full CSS In-Depth, v2 course:
The "Align and Justify Content" 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 uses align-content and justify-content to set the position of the grid, grid columns, and grid rows. You are also able to add a grid-gap.

Get Unlimited Access Now

Transcript from the "Align and Justify Content" Lesson

[00:00:02]
>> Estelle Weyl: So aligning the grid, these were items, place-items, right, align-items, justify-items. We now have justify and align content.
>> Estelle Weyl: Just to show you what it does. It only matters if you have extra space, right? That grid did not take up its entire parent's space, so basically, all of the items should they be like, is basically, instead of the gap.

[00:00:40] You can have a gap and center them and still maintain the gap, but you can basically overwrite the gap as well, now that you saw it. So justify-content has the same values as we saw in justify-content for Flexbox, and align-content has the same values as we saw for Flexbox as well.

[00:01:09]
>> Estelle Weyl: If you define something as a specific width, it'll be that width. So it's only autotrack sizes that can be stretched, so let's just play with this.
>> Estelle Weyl: So each of those items is always gonna 150 pixels, cuz we said it's going to be 150 pixels.
>> Estelle Weyl: And we could make it super tiny, because remember the place-items, what does place-items do?

[00:01:36]
>> Speaker 2: Combination of a line.
>> Estelle Weyl: It's aligned-items and justified-items. And now, we're going to focus on content. So align content, let's not do this, let's just do stretch.
>> Estelle Weyl: Okay so,
>> Estelle Weyl: Okay, so what we've declared, is we've declared five columns, I mean, five columns, yup, of a 150 pixels each.

[00:02:07] We only have nine items. We could do three, right?
>> Estelle Weyl: Now, we have tons of extra space on the right and on the bottom, because I actually put an outline around the size of the grid container. So the grid container is this like, 600 by 400 box or something like that.

[00:02:29] So align content basically says, take the rows and spread them evenly in a certain way. So we could do flex-start, which is a default, and put them all at the top, right? We could do flex-end, which puts them all at the end. We could do center, which puts it in the center of that box.

[00:02:54] The box goes down a little bit further, so you can, there. Now it keeps popping up.
>> Estelle Weyl: Okay, then we can do space-between.
>> Estelle Weyl: And if we remember from yesterday, space-between puts the first item along the,
>> Estelle Weyl: The main or cross axis, main-start or cross-start, and then it puts the last one at cross-end or main-end, and then it puts the equal amount of space between any additional ones.

[00:03:31] So between this first row, that space between the first and second row, and the space between the second and third row is equal. Space-around was that ugly thing that we did, right, which puts one-sixth of the space above the top, one-third between second and third row, one-third between the first and second row, and then one-third afterwards, which is ugly.

[00:03:55] And then space-evenly,
>> Estelle Weyl: Puts the same amount of space between the top and the first row, the first row and the second row, the second row and the third row, and the third row in the end. So now, that's how we did it, spacing out different rows, justify content spaces out the columns.

[00:04:15] So we can do flex-start,
>> Estelle Weyl: Flex-end,
>> Estelle Weyl: Center,
>> Estelle Weyl: Space-between.
>> Estelle Weyl: And then, if we do space-between here, that might actually be what we want. Unlikely, I prefer this, this and grid-gap.
>> Estelle Weyl: Gap, 20 pixels, right? To me, that looks better. But, if we have body,
>> Estelle Weyl: If we have background,

[00:05:06]
>> Estelle Weyl: Blue, you realize there's all this empty space, so you might actually want,
>> Estelle Weyl: That, which is probably the look you're going for. Does that make enough sense to people? I know, it doesn't make full sense to people, it's just important to understand that you can actually, if there's extra room, spread them out.

[00:05:29] And not just using gap, but actually using justify content and align content. So when it says align-items and justify-items, it's aligning each item individually. I mean, it's aligning each item within itself but globally, to all of them. And when you do align content and justify content, it's aligning the whole row and the whole, like all the rows and all the columns.