Welcome back.
Let's talk about individual items now when it comes to keep secret, because up until now we've just
used this container and performed operations or changed views to all the items.
But what if we wanted a bit of a funky grid system that has different sides?
In that case, we can just select individual items within this container.
If we go back to our normal page, we see that we have these zones, but each zone has different color.
So let's use one of these colors, for example, green, which we have two of to have some special access,
great properties.
So let's have a green class.
And I'm just going to do it up here instead of the bottom, just so we can keep all the great things
up the top.
Now, for individual items, I can say something like grid column and say what we wanted to do in terms
of the column grid system and the way this works is we can give it where to start and where it should
end.
What does that mean?
Well, if I do grid column start and I say one.
And then have a grid.
And and I give it to and I refresh the page.
Nothing changes.
What if I do grid column three and I refresh?
Whoa, what just happened here?
In order for us to understand what these numbers mean.
Let's open up the developer tools once again.
I'm going to select the items.
And as we'll see over here, we see that we have a grid zone and this fox is now taking up to grid spaces.
In the weight CSFs Grid works, it has a numbering system where the first line over here is one, the
second line over here is two, and then this is three.
Let's just make this a little bit bigger to show you.
That's better.
We now have three grid systems or three grid items, we have a one here when the first one begins to
where the second one begins and then three where the third one begins.
So what we're saying here is that when it comes to columns started one which is right over here and
then end at three.
So that if I do for here and I refresh.
You see that it now covers the entire length.
But as soon as we make it a little bit bigger.
Well, it only is going to cover the one, two, three, up to four.
And if we make it a little bit smaller.
You see that because we said one to four, it doesn't actually make it as responsible as it was before
and it actually extends to make sure that it fills in one to four.
And there's a shorthand way of doing this instead of saying great column start and great column and
we can just say great column and then give it the start number and then slash the end number so that
if I refresh.
You see that it's the same thing.
Let's make this a little bit bigger and let's just do three here just to keep it small.
All right, I'm going to close this.
And we see that our grid items now have well, this looks pretty good, actually, we have the green
classes that span over more grids.
Now, a trick here is that sometimes we just simply don't know what the user is going to see.
And we might want this to spend the entire length without having the rabbit come in and then the frog
and the line come in.
And we can actually do at the end here something like minus one, which means all the way till the end
for a refresher.
There you go and make this larger and smaller.
We see that we are saying started one and then keep going all the way until the end in sixth grade minus
one signifies the end of the viewport.
So then now we see that we have a nice, responsive grid again, that just adjusts, according to our
viewpoint, very, very cool.
Now, sometimes we don't really know how many grids we're going to have on our page, and we also might
not necessarily wanted to spend it all across from beginning to end.
So useful syntax here is to do something like Spane two, which says span across two grids.
If I refresh here, you see that green is spanning across two grids.
If I do three, it's going to span across three grids.
And as you can imagine, the default is span one, spanning across one.
But the interesting thing about this is if I do let's say spend two and I refresh.
As this gets smaller.
You see that it's always going to span across to make sure that it covers whatever the two grids are,
which is once again very useful.
Finally, we can also do the same thing with Rose if we do grid rose or grid row, I can say while we
want it to span, to start at, let's say one and end at.
By refresher.
Well, what just happened here?
Well, let's take a look.
We started one and end at three, and because Green is also this unicorn over here, it automatically
moved it all the way up because we wanted to start at one as well.
And remember, our grid system now is row.
And if I open the developer tools and select the grid, one starts here, then two, then three right
here where it ends.
So you have to be careful with the positioning here that this is going to move whatever it needs to
all the way up to one.
But we're able to move things around and adjust the roads as well.
Very, very cool.
Our grid system is starting to look really, really nice.
Let's do a bit more in the next video.