1
00:00:00,570 --> 00:00:01,170
Welcome back.

2
00:00:01,740 --> 00:00:07,290
Let's talk about individual items now when it comes to keep secret, because up until now we've just

3
00:00:07,290 --> 00:00:13,280
used this container and performed operations or changed views to all the items.

4
00:00:13,800 --> 00:00:18,510
But what if we wanted a bit of a funky grid system that has different sides?

5
00:00:18,930 --> 00:00:23,730
In that case, we can just select individual items within this container.

6
00:00:24,090 --> 00:00:31,670
If we go back to our normal page, we see that we have these zones, but each zone has different color.

7
00:00:31,770 --> 00:00:38,540
So let's use one of these colors, for example, green, which we have two of to have some special access,

8
00:00:38,550 --> 00:00:39,300
great properties.

9
00:00:40,570 --> 00:00:43,810
So let's have a green class.

10
00:00:44,850 --> 00:00:50,490
And I'm just going to do it up here instead of the bottom, just so we can keep all the great things

11
00:00:50,490 --> 00:00:51,030
up the top.

12
00:00:51,910 --> 00:00:59,950
Now, for individual items, I can say something like grid column and say what we wanted to do in terms

13
00:00:59,950 --> 00:01:08,170
of the column grid system and the way this works is we can give it where to start and where it should

14
00:01:08,170 --> 00:01:08,570
end.

15
00:01:09,220 --> 00:01:09,880
What does that mean?

16
00:01:10,480 --> 00:01:14,980
Well, if I do grid column start and I say one.

17
00:01:16,660 --> 00:01:18,220
And then have a grid.

18
00:01:21,400 --> 00:01:25,390
And and I give it to and I refresh the page.

19
00:01:26,800 --> 00:01:27,680
Nothing changes.

20
00:01:28,060 --> 00:01:31,540
What if I do grid column three and I refresh?

21
00:01:33,010 --> 00:01:34,950
Whoa, what just happened here?

22
00:01:36,860 --> 00:01:39,560
In order for us to understand what these numbers mean.

23
00:01:41,450 --> 00:01:43,880
Let's open up the developer tools once again.

24
00:01:44,980 --> 00:01:47,230
I'm going to select the items.

25
00:01:48,450 --> 00:01:57,120
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.

26
00:01:58,300 --> 00:02:06,580
In the weight CSFs Grid works, it has a numbering system where the first line over here is one, the

27
00:02:06,580 --> 00:02:13,180
second line over here is two, and then this is three.

28
00:02:14,210 --> 00:02:16,820
Let's just make this a little bit bigger to show you.

29
00:02:20,130 --> 00:02:20,770
That's better.

30
00:02:21,570 --> 00:02:30,390
We now have three grid systems or three grid items, we have a one here when the first one begins to

31
00:02:30,420 --> 00:02:34,680
where the second one begins and then three where the third one begins.

32
00:02:35,340 --> 00:02:41,460
So what we're saying here is that when it comes to columns started one which is right over here and

33
00:02:41,460 --> 00:02:43,530
then end at three.

34
00:02:44,480 --> 00:02:47,660
So that if I do for here and I refresh.

35
00:02:49,000 --> 00:02:52,780
You see that it now covers the entire length.

36
00:02:53,510 --> 00:02:56,400
But as soon as we make it a little bit bigger.

37
00:02:56,570 --> 00:03:02,540
Well, it only is going to cover the one, two, three, up to four.

38
00:03:03,410 --> 00:03:05,960
And if we make it a little bit smaller.

39
00:03:08,700 --> 00:03:15,810
You see that because we said one to four, it doesn't actually make it as responsible as it was before

40
00:03:15,810 --> 00:03:19,440
and it actually extends to make sure that it fills in one to four.

41
00:03:20,370 --> 00:03:25,470
And there's a shorthand way of doing this instead of saying great column start and great column and

42
00:03:25,800 --> 00:03:32,130
we can just say great column and then give it the start number and then slash the end number so that

43
00:03:32,130 --> 00:03:32,970
if I refresh.

44
00:03:34,720 --> 00:03:36,130
You see that it's the same thing.

45
00:03:36,820 --> 00:03:41,410
Let's make this a little bit bigger and let's just do three here just to keep it small.

46
00:03:43,350 --> 00:03:44,670
All right, I'm going to close this.

47
00:03:46,270 --> 00:03:52,930
And we see that our grid items now have well, this looks pretty good, actually, we have the green

48
00:03:52,930 --> 00:03:57,150
classes that span over more grids.

49
00:03:58,120 --> 00:04:03,010
Now, a trick here is that sometimes we just simply don't know what the user is going to see.

50
00:04:03,820 --> 00:04:11,140
And we might want this to spend the entire length without having the rabbit come in and then the frog

51
00:04:11,140 --> 00:04:12,040
and the line come in.

52
00:04:13,350 --> 00:04:19,320
And we can actually do at the end here something like minus one, which means all the way till the end

53
00:04:19,890 --> 00:04:20,760
for a refresher.

54
00:04:20,790 --> 00:04:24,640
There you go and make this larger and smaller.

55
00:04:24,780 --> 00:04:32,340
We see that we are saying started one and then keep going all the way until the end in sixth grade minus

56
00:04:32,340 --> 00:04:36,390
one signifies the end of the viewport.

57
00:04:38,150 --> 00:04:45,260
So then now we see that we have a nice, responsive grid again, that just adjusts, according to our

58
00:04:45,260 --> 00:04:47,630
viewpoint, very, very cool.

59
00:04:48,900 --> 00:04:55,470
Now, sometimes we don't really know how many grids we're going to have on our page, and we also might

60
00:04:55,470 --> 00:04:59,060
not necessarily wanted to spend it all across from beginning to end.

61
00:04:59,940 --> 00:05:08,360
So useful syntax here is to do something like Spane two, which says span across two grids.

62
00:05:08,640 --> 00:05:12,590
If I refresh here, you see that green is spanning across two grids.

63
00:05:13,200 --> 00:05:17,520
If I do three, it's going to span across three grids.

64
00:05:18,220 --> 00:05:23,330
And as you can imagine, the default is span one, spanning across one.

65
00:05:24,060 --> 00:05:29,640
But the interesting thing about this is if I do let's say spend two and I refresh.

66
00:05:30,800 --> 00:05:32,450
As this gets smaller.

67
00:05:37,330 --> 00:05:44,770
You see that it's always going to span across to make sure that it covers whatever the two grids are,

68
00:05:45,370 --> 00:05:47,710
which is once again very useful.

69
00:05:49,000 --> 00:05:59,590
Finally, we can also do the same thing with Rose if we do grid rose or grid row, I can say while we

70
00:05:59,590 --> 00:06:05,230
want it to span, to start at, let's say one and end at.

71
00:06:07,460 --> 00:06:08,780
By refresher.

72
00:06:12,260 --> 00:06:13,520
Well, what just happened here?

73
00:06:15,680 --> 00:06:16,890
Well, let's take a look.

74
00:06:17,120 --> 00:06:25,880
We started one and end at three, and because Green is also this unicorn over here, it automatically

75
00:06:25,880 --> 00:06:29,100
moved it all the way up because we wanted to start at one as well.

76
00:06:29,570 --> 00:06:33,230
And remember, our grid system now is row.

77
00:06:33,230 --> 00:06:42,680
And if I open the developer tools and select the grid, one starts here, then two, then three right

78
00:06:42,680 --> 00:06:43,550
here where it ends.

79
00:06:44,150 --> 00:06:50,540
So you have to be careful with the positioning here that this is going to move whatever it needs to

80
00:06:50,810 --> 00:06:51,980
all the way up to one.

81
00:06:54,910 --> 00:06:58,660
But we're able to move things around and adjust the roads as well.

82
00:06:59,560 --> 00:07:00,960
Very, very cool.

83
00:07:02,050 --> 00:07:04,760
Our grid system is starting to look really, really nice.

84
00:07:05,440 --> 00:07:07,150
Let's do a bit more in the next video.