Original subtitles

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 there's 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 overwrite 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 or 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 or page here a little bit better.

Let's quickly also create a grid,

but 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 one under 25 pixels,

200 and then another smaller one.

And here I'm not using Fr units

because I'm not really trying to make 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 now 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's a lot of empty space here.

And so there is some space to align all 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 to see here as a very important comment.

So that's distribute here.

And so the properties we use for that,

are justified content and aligned content.

So it's these two properties that end in content,

which are for aligning tracks inside the 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 a space between, for example,

which might be helpful.

And so just like in Flexbox,

maybe you expected this result where we 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 may be demonstrated even a bit better.

And of course there would also be

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 some of these width of columns plus the gap,

but then the container has this higher width.

Okay. And so now let's move on to aligning the tracts.

We're actually aligning the items inside cells.

And so we can also say that this 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 year 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 always see a tiny square

around the content, but everything centered.

Right. And here, that's the result.

And this will be even better to see once we turn on

the grid visualization, so like this, and so,

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 items is by default, as I mentioned stretch.

Right, and so that would look like this.

but we just cell it to center.

Right. But then as always, there is also a start,

which put them at the start and there is end.

And again, it is just end without deflects.

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 access, y 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 overwrite 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 overwrite 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 overwrite 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 or layout using CSS grid.

So I'm very excited for that one.

And I hope that you are too.