-: So until now,
we have basically let 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 here back to One FR.
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 that terminology of grid cells
and all that, let me actually show you the very
helpful depth 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 the number
to 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 this 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 the so-called gutters
which we can create with the gap.
And yeah, so these are in the tracks.
So the road tracks empty four 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 is this one L eight.
And we want it placed here.
And so that is column number two as visible
from this grid line.
And row number one as 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 this on now.
So now to grid row number one, two, two, right?
And keep in mind that these two are properties
that always need to be used on grid items, right?
So these here, like grid template columns,
rows, and gaps 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 too again.
Place this item exactly in this cell.
So do you think you can do that?
Hopefully you can.
And I'll see you here in a minute once you are ready.
Okay, so let's once again turn on the visualization here
and then let's write our code.
So that is grid column
one, two, two right?
So it should start here and go here.
And then as for the row, it should go from 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 that's again, bring back.
And so yeah, this is exactly what we specified.
So column 1, 2, 3
and so therefore now it fails these two cells here.
And so this is the trick that we use
in order to have an item spent 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 it 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 now 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 two,
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 four
and then it'll 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 really a really great trick
a really great idea.
So you see that these grid lines go
from one to three to five here at the top of the grid.
However, at the bottom of the grid,
if you see it,
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 at 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 L six 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 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'll 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.
Now if we said span three,
then it would create just another road 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 like 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.