Man: Now just like in Flexbox and CSS Grid,
we also have the ability of aligning grid items.
And so let's now learn how that works.
And now let's actually work on this other grid here.
So this container two.
So I'm removing "display: none" from this one.
And actually let's put it here.
Okay?
Now this didn't have any effect
because later here we override display
with the grid value, right?
So not here, but let's put it here at the end.
Let's say this is only temporary,
because of course you
will want to take a look at it later.
So this is our other grid container.
So number two,
let's just make it a little bit smaller.
Let's say just 700 pixels and a margin of 40.
And so that fits our page here a little bit better.
Let's quickly also create a grid
with this we can practice a little bit.
So remember, a grid container needs display
set to grid.
Then here we have six elements.
For some reason we don't have number two,
but, well that doesn't matter.
So we have six elements.
So let's create a grid three by two.
So three columns, two rows.
So grid template columns, and let's make
the first 125 pixels,
200, and then another smaller one.
And here I'm not using FR units
because I'm not really trying to make
like a real world grid.
So this is just for demonstration purposes anyway.
So we can just use fixed width.
So template rows, and here,
250, let's say,
and 100 pixels.
Okay, so that is our grid.
All right?
Once again, this number three here, has the height
of 150 pixels, and therefore it doesn't fill up
the entire track height of 250 pixels.
That's why we have this black color here
which is the background of this container.
And you see that there is also a lot
of empty space here around this grid.
And so this is what we will now talk about.
So, aligning grid items is a little bit different
than it is in Flexbox,
because we can align both the tracks inside the container
and we can also align the grid items inside of the tracks.
And that's because sometimes the grid items
are smaller than the cells that they are in.
But let's not start with aligning the grid tracks
inside of the grid container.
So basically the columns and the rows
inside the grid container.
And that's only possible in this case
because the grid itself.
So this one here is smaller than the grid container.
So as I mentioned, there is a lot of empty space here.
And so there is some space to align our tracks
inside of the container.
So let's write that here as a comment.
Aligning tracks inside container.
And so these are basically about distributing empty space.
So, empty space,
just so you get this here as a very important comment.
So that's distribute here.
And so the properties we use for that
are justified content and align content.
So it's these two properties that end in content
which are for aligning tracks inside a container.
And let's start with actually justify content
which you might notice is exactly the same
as it is in Flexbox.
And it does do the same thing.
So if we set this to center
then this will align the entire tracks inside
of the container.
So you see that's exactly what happened.
And it is also the same thing that happens in Flexbox.
So this property here might already be clear to you.
Now, we can also do like the other values.
So we can also say, "space between," for example,
which might be helpful.
And so just like in Flexbox,
maybe you expected this result
where it distributed the empty space here evenly
between all of these three tracks.
All right?
But, let's turn this one off,
and leave it at the center like this.
And so we can align them horizontally
inside of the container,
but of course we can also align the tracks vertically.
And so for that, we have align,
but now it's not items, but content.
So aligned content, which is a new one.
And here, let's again use center for example.
And there we go.
So with this, the entire grid is now centered
inside of the grid container.
We can of course also give ourselves some gap here.
Let's say 50.
And this maybe demonstrates it even a bit better.
And of course there would also be
like space between, like this.
So it would push each of the tracks to one of the extremes.
So the first one to the top, the other one to the end.
And then there's also things like start or end.
And these are actually different from Flexbox.
So you see here actually this suggestion,
which says, "flex end."
But this one only works on Flexbox.
So this is a bit confusing
and I'm not sure why they did it like this,
but well, in CSS Grid it's called "end and start,"
while in Flexbox it is called "flex end," and "flex start."
All right?
So again, start, but let's put it at the center.
So centering things in CSS
is something that we usually like to do a lot.
Okay.
And that's it, about aligning tracks
inside of the container.
And once again, this only makes sense
because the grid container is actually bigger
than the grid itself.
So the grid itself is only
the sum of these width of these columns, plus the gap,
but then the container has this higher width.
Okay?
And so now let's move on to aligning the tracks.
Or actually aligning the items
inside cells.
And so can also say that these properties are about
moving items around inside the cells.
And let's start with align items.
And this one you already remember from Flexbox, right?
So what do you think is going to happen
when we also set this one to center?
And keep in mind that this is
about aligning items inside of the cells.
So right now the cell is this entire thing here
which has this background color, so which is visible.
And that's basically because by default,
align items is set to stretch.
So just like in Flexbox, okay?
So again, all of this here is the cell
but now we will move the items around inside of the cells.
So if we set this to center, then let's see.
And there you go.
So now the grid items are centered vertically
because that is what align is always all about.
Right?
And we can of course also do the same thing horizontally.
And so for that is always justify.
Justify items.
And if we set that to center as well,
then we should only see a tiny square
like around the content, but everything centered, right?
And yeah, that's the result.
And this will be even better to see
once we turn on the grid visualization.
So like this,
and so well somehow it disappears.
But, anyway, so here you have the cells and then you see
that the items are in fact now aligned vertically
and horizontally in the center.
So let's experiment a little bit more here,
and I'm doing it here now so that the
overlay here doesn't disappear.
So align the items is by default, as I mentioned, stretch.
Right?
And so that would look like this.
But we just set it to center, right?
But then as always, there is also start,
which put them at the start, and there is end.
And again, it is just end without the flex.
All right?
And of course we can try the same with justify items,
which also by default is stretch.
So just like this, stretching all the way
from left to right, because justify is horizontally.
So it's across the row axis.
And here we could say end as well,
which would put the elements into this
very corner of the cell, right?
But let's actually keep them here in the center like this.
So to recap, the content properties,
so these two properties that end in content,
they are about aligning tracks inside
of the container, okay?
And then justify is horizontally, so on the row axis,
while align is vertically, so on the column axis.
And the same is true down here
for aligning the items inside of the cells.
But then these two are called "items."
So it is both align and justify the items.
Okay?
And now finally, remember how in Flexbox we could
override these individually.
So let's do the same here and select,
for example, element number three,
which is this one that has the special height.
And so just like in Flexbox, we have "align self,"
which will then override the align items property
that we have up here.
So it's in the center, let's put it at the end, for example.
So just like this, and in CSS Grid, we can then also
override the justify items, so, horizontally.
So justify, self, and then let's say end.
Again, just to put it there in the corner.
Okay.
And this is actually a very good way
of centering individual items in CSS Grid.
So for example, let's say that these two
would actually be in the end,
so all of them would be in the bottom right corner
of the cell, but then we wanted to center one of them.
So set this one to center, and there you go.
All right, great.
With this we wrap up this introduction to CSS Grid,
which I hope was not all too confusing,
even though I know it was a lot to take in.
But as always, there is no need to memorize
all of this for now.
What I want you to take away from these last few lectures,
was that you now know how CSS Grid actually works
in broad terms, because if you know that,
then it will be very easy to simply go
and look up the exact properties that you need.
For example, in the cheat sheet that I gave you
in the theory lecture.
So the one that you hopefully printed out
and have somewhere on your desk like I actually do.
Nice.
So that's great, great progress.
Very good to still see you here.
And now in the next video, we will apply our knowledge
to the page that we have been building.
So, basically we will now build our layout using CSS Grid.
So I'm very excited for that one
and I hope that you are too.