All language subtitles for 062 Placing and Spanning Grid Items.en_US

So until now,

we have basically led CSS grid decide

where to place our items in a completely automatic way

simply following the source HTML code.

However, sometimes it's important to manually place elements

in a grid cell other than the predefined one,

and so let's now learn how.

And let's start by turning this one here off,

set this year back to 1fr,

and actually let's turn this height back on,

so this makes it look a little bit better.

And also here I will increase the gap

because that will make it easier to visualize

what we are going to do now.

Okay.

But now let's go to the topic of this video,

which is about how to place a certain grid item

like this one here say, into another grid cell,

like here, for example.

So into a grid cell,

that was not its default one, all right?

And going back to the terminology of grid cells

and all that,

let me actually show you the very helpful dev tools

that we have for CSS grids.

So here you can actually see many of the terms

that I mentioned before in the theory lecture.

So you have to number the grid lines

like one, two, three, four, five,

you have the gutters and you also can see the grid cells.

Well let me turn one of them off like this one here.

So to turn us on, we need to actually click this here.

And so here you can see that basically,

the intersection of these two grid lines here

creates this cell.

So right now, this cell does not have any grid item,

and that is perfectly okay.

Then here, you have to so-called gutters,

which we can create with the gap,

and yeah.

So these are in the tracks,

so they're all tracks entity for column tracks like this,

right?

But now we are actually interested in these numbered

grid lines here because they will allow us

to place any grid item wherever we want.

So let me show you how,

and for that, I'm leaving, it turned on here.

So let's actually use that example

I mentioned in the beginning.

So placing this grid item here inside of this grid cell,

so basically in this position here.

So let's select it,

it is element eight,

so the class has this one, el--8,

and we wanted placed here.

And so that is column number two

as the visible from this grid line

and row number one as the visible from this grid line.

So let's start actually with the column.

So we can say grid-column,

and then as I said, that's column number two,

and then we can also specify the end basically.

So we say that it should start at column number two

and end at column number three,

so right here.

So if I save this now,

then you see that it did actually move

to the second column.

Now this created then an additional row here,

but let's fix that now by moving it here

to row number one.

So again, turning these on now,

so now to grit row number one to two, right?

And keep in mind that these two are properties

that always need to be used on grid items, right?

So this here, like grid template, columns, rows, and gap

are used on the grid container

while these are used on grid items.

But anyway, let's put it here exactly where we want it,

and there you go,

now it is right here exactly where we placed it.

And now let's do the same with this one here,

and I want to place it down here.

So let me select it first,

so that's element two.

And now I want you to pause the video

and write the code to again,

place this item exactly in this cell.

So do you think you can do that?

Hopefully you can, and I see you here in a minute,

once you already.

Okay.

So let's once again, turn on the visualization here

and then let's write our code.

So that is grit column

one to two, right?

So it should start here and go here.

And then as for the row, it should go two to three.

So grid-row two to three.

And there it is, beautiful.

And actually if the second value here

is just one more than the first, we can omit it.

So we can do this,

and it will still be in the same place.

However, what do you think will happen

when we specify a second value

that is actually not just plus one?

So we had this, but what if we did this?

So what do you think it is going to look like now?

So let's save that,

and well, now this item spans across two cells.

So let's again, bring back,

and so yeah, this is exactly what we specified.

So column one to three,

and so therefore now it fills these two cells here.

And so this is the trick that we use

in order to have an item span across multiple grid cells.

And of course, we could use any other number here,

like four, right?

And so now it spans across these three cells.

And notice how I just said three cells, right?

So sometimes we might not want to do math here,

and so instead of this, we can actually also say span three.

So in other words, instead of specifying the final value

of the grid line, we can simply say,

start at one and then span across three cells.

And so this should not look exactly the same, and it does.

So let me keep that other one here as well,

so as a reference basically.

But these two are exactly the same.

All right.

And if we say span 2, well then,

as you can expect, it will only span across two cells

and then like this, which is quite unnecessary,

but just to see it,

now we are back to filling only one cell.

Now of course, we can also say span 4,

and then it will go all the way from one side

to the container of the other one.

And let's actually keep working with this situation

where we want one grid item

to span all the way to the end of the container.

So in some situations, we might not even know

how many columns there are in a grid,

or we might simply not want to think about

how many cells we need to span.

And so in those situations,

there is a very nice trick that we can use

instead of manually spanning.

So let me again, just copy this

and turning it off to keep it as a reference,

all right?

And so if we simply want one element

to span all the way to the end,

we can use minus one,

so you see the result is the same.

And it still works of course,

for example, if we started this at two,

so then it would start at two and it would span

all the way to the end, which is minus one.

And now let me quickly show you why this trick works,

which is actually a really great trick,

a really great idea.

So you see that these grid lines go from one, two, three

to five here at the top of the grid.

However, at the bottom of the grit if you see,

then they go from minus one to minus five,

so basically in the opposite direction.

So what this means is that each of these grid lines

actually has two numbers.

So this one is not only four,

but also minus two.

And so this one, which is the last one

is not only five, but it is also minus one,

and so this is why the trick works.

So we start at one, which is here,

so this grid line is called one and minus five,

and so we can just use this one, so one,

and then, we go all the way to minus one,

which again is this last one here.

And so this is why this trick works.

Okay, and finally, of course the same thing,

so spanning also works for rows.

So let's experiment maybe with this number six here now.

So el--6,

and let's leave the column where it is.

So of course we can, if we want only manipulate one of them.

And so let's say grid-row,

so right now, it is at three,

but let's say we want it to go until six.

Well, that's not what I intended,

so I think I said three, not four.

So yeah, this is what I was looking for.

So this doesn't look very special,

but actually what happened was that a new row here

was inserted.

Let's just do this until four,

okay?

So now you see that a new row was inserted.

So a three, then here for some reason,

we're missing the four,

but then there is five all the way at the end.

So this is maybe not such a good example,

but we can just experiment a little bit more with this.

So if we just briefly turn off this one here,

then we have some more space

so that we can span this one here.

So this number eight, we already have it selected,

and so if we say, for example, three here,

then as expected, it will span these two grid cells now

across these two rows.

And the same works if we say minus one,

then it goes all the way to the end,

or if we say span two.

If we said span three,

then it would create just another row down here,

so just like we saw it actually happening before, okay?

But let's actually turn it off again.

I will again just leave it here as a reference.

Let's turn this one back on

because I liked the way that looked, and yeah.

So I think I showed you enough now about this topic,

but this is worth experimenting a lot with.

So I hope that you have some time to maybe do that now.

So you can select different elements here

and then see what happens

when you place them in different cells

and do some spanning,

and you can even try to overlap them.

So basically placing different grid items in the same cell,

and you will see that that actually works.

So have some fun with that,

and then I will see you back here for our next lecture.