1
00:00:00,610 --> 00:00:01,190
Welcome back.

2
00:00:01,750 --> 00:00:07,240
I've given you some starter files, so I recommend watching these videos, as you quote along as well

3
00:00:07,480 --> 00:00:08,710
on your computer.

4
00:00:09,460 --> 00:00:12,880
We have a few animal carts here that are extremely cute.

5
00:00:12,880 --> 00:00:14,830
Obviously, right now.

6
00:00:15,190 --> 00:00:23,500
If we look at what we have, we have an HTML page with just simple devs that contain these little images

7
00:00:23,500 --> 00:00:24,130
of animals.

8
00:00:24,340 --> 00:00:31,120
And if we go to the style tab of prefilled, a few things for you just so things look good.

9
00:00:31,660 --> 00:00:39,340
But all we're really doing here is we have a few colors and we've added gradients here just so it looks

10
00:00:39,340 --> 00:00:40,210
a little bit nicer.

11
00:00:40,420 --> 00:00:48,700
And we have the zones, which are these individual cards with some predefined excess properties that

12
00:00:48,700 --> 00:00:50,830
we've already seen in the previous videos.

13
00:00:51,370 --> 00:00:57,490
Just with this base success that we have, we see that we have some really nice looking cards.

14
00:00:58,060 --> 00:01:01,780
And right now we're using display in line block.

15
00:01:02,110 --> 00:01:07,900
If I change this to display block and I say this, let's refresh.

16
00:01:08,500 --> 00:01:11,410
We see that we now have blocks.

17
00:01:12,160 --> 00:01:12,730
That's great.

18
00:01:13,580 --> 00:01:21,850
But we want a little bit more control and perhaps make this grid a little bit more responsive, maybe

19
00:01:21,860 --> 00:01:28,010
look a little bit different and just overall cleaner and when it comes to grids, success grade as a

20
00:01:28,010 --> 00:01:28,440
way to go.

21
00:01:28,460 --> 00:01:29,630
So how do we use it?

22
00:01:30,440 --> 00:01:33,950
Well, the first thing we need to do is to have a container.

23
00:01:35,430 --> 00:01:37,020
Around these items.

24
00:01:38,090 --> 00:01:41,570
So I'm just going to create a new div and give it a class.

25
00:01:43,020 --> 00:01:48,420
Of container, we can name it whatever we want, but container is a nice.

26
00:01:49,910 --> 00:01:58,700
Descriptive class name, and we wrap all the items in this container now, the way it works is very

27
00:01:58,700 --> 00:02:00,800
similar to flex box.

28
00:02:01,490 --> 00:02:12,800
That is, we give it the property of display grid and all the children will now be able to be part of

29
00:02:12,800 --> 00:02:14,320
this grid system.

30
00:02:14,870 --> 00:02:16,250
So let's see what that looks like.

31
00:02:16,700 --> 00:02:20,180
I'm going to have the container.

32
00:02:21,190 --> 00:02:25,540
Class and this container class will have display.

33
00:02:29,230 --> 00:02:36,940
Grid, so remember, with flex box, we can do flex at similar to that we do display grid and we no

34
00:02:36,970 --> 00:02:41,290
longer want to use the display block of the zones because we're going to have a grid system.

35
00:02:41,470 --> 00:02:43,230
So I'm just going to comment this out for now.

36
00:02:43,480 --> 00:02:47,800
We've just declared this as a grid system, but we actually need to tell her what to do now.

37
00:02:48,040 --> 00:02:57,190
And the most important part of the grid is this property grid template columns.

38
00:02:58,540 --> 00:03:03,070
And most likely, you're going to be using this and all your grid implementation.

39
00:03:04,140 --> 00:03:11,550
And what we can use this grid template columns is to tell our page how many columns we want to use in

40
00:03:11,550 --> 00:03:14,220
here, if I say something like three hundred pixels.

41
00:03:15,510 --> 00:03:19,740
And three hundred pixels, I save and refresh your.

42
00:03:21,180 --> 00:03:28,170
Look at that, I have three hundred pixels and then three hundred pixels and automatically it because

43
00:03:28,170 --> 00:03:36,150
I've declared it this way with two definitions or two values, it assumes that we have two grids, two

44
00:03:36,150 --> 00:03:39,060
grids of three hundred pixels and three hundred pixels.

45
00:03:39,390 --> 00:03:47,790
So if I make this larger or smaller, it's always going to have three hundred pixels, two columns.

46
00:03:52,180 --> 00:03:58,840
If I add, let's say, another three hundred pixels here and safe refresh, look at that.

47
00:04:00,140 --> 00:04:03,610
We now have three columns, very, very nice.

48
00:04:03,960 --> 00:04:08,930
Another one that you'll see a lot of is the grid gap.

49
00:04:11,390 --> 00:04:16,390
And as you might guess from the name, it tells us how much gap we want between the grids.

50
00:04:17,000 --> 00:04:19,520
So if I do 20 pixels here and I refresh.

51
00:04:20,960 --> 00:04:30,050
I see that we get 20 pixels of gap now this looks really good right now, but if I change things around,

52
00:04:30,080 --> 00:04:35,290
this isn't really responsive because each column is three hundred pixels wide.

53
00:04:35,630 --> 00:04:39,730
And as we know, users have different display sizes.

54
00:04:40,340 --> 00:04:45,250
So you get these ugly grids where you have a white space over here.

55
00:04:45,680 --> 00:04:47,990
How would we go about solving this?

56
00:04:49,140 --> 00:04:50,810
And you might be thinking, hmm?

57
00:04:51,120 --> 00:04:52,920
What if we just do percentages here?

58
00:04:53,880 --> 00:04:58,340
What if we had four columns and we say twenty five percent?

59
00:04:58,770 --> 00:04:59,930
Twenty five percent.

60
00:04:59,940 --> 00:05:00,930
Twenty five percent.

61
00:05:01,140 --> 00:05:02,010
Twenty five percent.

62
00:05:03,590 --> 00:05:04,820
If I refresh this.

63
00:05:09,790 --> 00:05:13,840
I have four columns, but there's still some scrolling involved.

64
00:05:16,570 --> 00:05:19,960
Although we see that things are a little bit more responsive now.

65
00:05:23,160 --> 00:05:28,890
Now, you can totally do percentages with great template columns, and it's definitely a lot better

66
00:05:28,890 --> 00:05:34,260
than using something like pixels, but you now have to start calculating the fact that you also have

67
00:05:34,260 --> 00:05:42,000
a grid gap of twenty pixels and well, a grid actually gives us a really, really good tool that I recommend.

68
00:05:42,000 --> 00:05:47,520
You use one hundred percent of the time instead of percentages or pixels or items or items.

69
00:05:48,210 --> 00:05:51,630
And that is called a F.R. or a fraction.

70
00:05:53,180 --> 00:05:59,180
Now, what does the F.R. syntax me, if I do want F.R. here and I save and let's refresh.

71
00:06:00,860 --> 00:06:09,580
All right, I get one item, F.R. means we have one fraction in this column, so just fill it all up

72
00:06:10,160 --> 00:06:12,890
if I do want F.R. again.

73
00:06:14,320 --> 00:06:23,170
And I refresh, I get two columns, but look at this as I expand and make it smaller, it automatically

74
00:06:23,440 --> 00:06:30,180
sizes because I'm saying I want two columns that are one F.R., one far.

75
00:06:32,920 --> 00:06:41,320
Now, a better way to explain what this F.R. value means is if I do something like too far here, what

76
00:06:41,320 --> 00:06:42,120
do you think will happen?

77
00:06:43,190 --> 00:06:45,110
If I save and refresh.

78
00:06:46,440 --> 00:06:48,060
This should give you a better idea.

79
00:06:48,480 --> 00:06:51,030
All we're saying is we want three columns.

80
00:06:52,220 --> 00:07:01,970
And in terms of the proportion or the sizes, I want the first two columns to be half the size of the

81
00:07:01,970 --> 00:07:07,400
third column because in terms of fractions, this is twice as big as the other ones.

82
00:07:09,460 --> 00:07:16,960
As I make this larger and larger, it's always going to say and keep those proportions, this is going

83
00:07:16,960 --> 00:07:19,090
to be twice as large as the other ones.

84
00:07:22,750 --> 00:07:29,770
So when you using sixth grade, this is the best way for you to maintain this great system and make

85
00:07:29,770 --> 00:07:30,940
sure that it's responsive.

86
00:07:31,790 --> 00:07:32,570
How cool is that?

87
00:07:33,380 --> 00:07:39,470
Just by writing three properties, saying that we want to use the grid system, adding maybe a grid

88
00:07:39,470 --> 00:07:43,880
gap and grid template columns with these F.R. values.

89
00:07:44,850 --> 00:07:51,000
We've made a grid system that is quite responsive, but there are a few more properties that we can

90
00:07:51,000 --> 00:07:54,150
use in excess grid, so let's check them out in the next video.