1
00:00:00,360 --> 00:00:04,770
‫Now, let me jump back to my coordinator and start working with our current example.

2
00:00:07,210 --> 00:00:12,730
‫Now here, I have to find a quick there and inside this, I have multiple elements.

3
00:00:13,180 --> 00:00:18,730
‫Now remember, whenever we are working with a layout, we are going to work in the form of parent and

4
00:00:18,730 --> 00:00:19,840
‫child relationship.

5
00:00:20,230 --> 00:00:25,480
‫Here my parent is container and these item one item do all our child.

6
00:00:25,960 --> 00:00:31,540
‫I've also added a common class called items, so I can control similar design on all of them.

7
00:00:32,140 --> 00:00:36,700
‫And I have added some simple design so I can have different colors as well as some background.

8
00:00:38,430 --> 00:00:45,900
‫So if you jump here with our style, our cast, I've included font, not as my Google font, then I

9
00:00:45,900 --> 00:00:53,560
‫have default font family and some information like background color banding and this simple design that

10
00:00:53,560 --> 00:01:01,200
‫that's not code now had one thing I did, which is important and I have included display as great.

11
00:01:01,800 --> 00:01:06,900
‫Now this is where things are going to work now since my period is great.

12
00:01:07,050 --> 00:01:13,470
‫That means oldest child are going to follow something about that layout, about its property.

13
00:01:14,040 --> 00:01:20,070
‫So here we are going to discuss about our first resource, which is District a complete guide to great.

14
00:01:20,610 --> 00:01:26,490
‫Now again, this is going to follow something similar like we did with Flexbox, but at this point of

15
00:01:26,490 --> 00:01:29,310
‫time, you don't have to jump ahead and do anything.

16
00:01:29,760 --> 00:01:33,420
‫First, I'm going to explain things with practical example here.

17
00:01:33,810 --> 00:01:37,620
‫Later on, you have to jump onto this guide and understand more.

18
00:01:38,160 --> 00:01:44,220
‫Similarly, with this second guide itself learns, yes, great Dot-Com Simple Guide that is going to

19
00:01:44,220 --> 00:01:47,920
‫discuss everything that we are going to experiment.

20
00:01:48,600 --> 00:01:49,100
‫OK.

21
00:01:49,140 --> 00:01:50,130
‫No fancy stuff.

22
00:01:50,850 --> 00:01:51,640
‫So that's it.

23
00:01:51,660 --> 00:01:53,350
‫I'm going to close both of them.

24
00:01:53,700 --> 00:01:55,370
‫Let me just have them on site.

25
00:01:55,380 --> 00:01:58,950
‫And also we have this whole tool, which is going to help us a lot.

26
00:01:59,550 --> 00:02:00,570
‫Let me clear this up.

27
00:02:00,960 --> 00:02:01,290
‫Yup.

28
00:02:02,350 --> 00:02:04,770
‫So, yeah, so this is where we are going to.

29
00:02:05,870 --> 00:02:10,820
‫Now, by default, when we use credit, we are going to follow a sequence of top-to-bottom.

30
00:02:11,060 --> 00:02:12,830
‫Again, we have multiple rules.

31
00:02:12,860 --> 00:02:19,730
‫That means one rule is going to have one item at this point of time on, I should say one, Roy is going

32
00:02:19,730 --> 00:02:20,750
‫to have one child.

33
00:02:21,200 --> 00:02:23,120
‫Right click click on Inspect.

34
00:02:23,840 --> 00:02:27,590
‫This is out there and how you can see a simple sign off grid.

35
00:02:28,370 --> 00:02:32,900
‫Now here you will see points like one two three four five six.

36
00:02:33,140 --> 00:02:34,460
‫We'll be discussing about this.

37
00:02:34,460 --> 00:02:36,470
‫It's important for now.

38
00:02:36,470 --> 00:02:39,260
‫You can remember the math lines, grid lines.

39
00:02:39,410 --> 00:02:41,750
‫OK, we are going to discuss this last point.

40
00:02:42,380 --> 00:02:44,900
‫Also, here we are following a normal sequence.

41
00:02:45,050 --> 00:02:49,190
‫OK, now let me get back here and start playing with this.

42
00:02:49,220 --> 00:02:55,550
‫Since this is a patent, so we are going to have certain properties regarding patent OK properties for

43
00:02:55,550 --> 00:02:59,030
‫bidding and then we are going to have properties for children.

44
00:03:00,050 --> 00:03:02,340
‫We are going to call them as container child.

45
00:03:02,360 --> 00:03:04,040
‫We are going to call them as item.

46
00:03:04,910 --> 00:03:11,270
‫OK, that said, that said, I'm going to repeat things because certain students are not going to watch

47
00:03:11,270 --> 00:03:15,200
‫Flexbox and they are directly going to jump here on sixth grade.

48
00:03:15,530 --> 00:03:17,690
‫So it's important to balance both of them.

49
00:03:18,200 --> 00:03:18,620
‫OK.

50
00:03:18,890 --> 00:03:23,990
‫And if you are watch Flexbox, you will have decent revision, but there are different type of concept.

51
00:03:24,230 --> 00:03:24,920
‫Don't worry.

52
00:03:25,520 --> 00:03:28,130
‫OK, so this is parent we have included are great.

53
00:03:28,270 --> 00:03:32,990
‫Now let's start with discussion about how we are going to have multiple call on how we are going to

54
00:03:32,990 --> 00:03:35,380
‫have multiple rules at this point of time.

55
00:03:35,390 --> 00:03:37,040
‫We only have one column, you see.

56
00:03:37,460 --> 00:03:42,200
‫This is one complete column and inside this column we have everything.

57
00:03:42,560 --> 00:03:48,110
‫So that means if I jump on to my tool and here we have this column, here we have this rule.

58
00:03:48,560 --> 00:03:55,820
‫So at this point of time are following some similar path where we have one column you can see this whole

59
00:03:55,820 --> 00:04:01,490
‫is one column and then we add one two three and keep on falling.

60
00:04:01,490 --> 00:04:02,780
‫That means multiple child.

61
00:04:03,170 --> 00:04:06,710
‫So I can one two three four five six like this?

62
00:04:07,310 --> 00:04:14,900
‫OK, but what we can do to add multiple columns, we have property as great template columns, so all

63
00:04:14,900 --> 00:04:17,600
‫you have to do is utilize great template columns.

64
00:04:18,200 --> 00:04:24,110
‫And now this is going to take values, multiple values in the form of column size.

65
00:04:24,620 --> 00:04:25,060
‫Yes.

66
00:04:25,060 --> 00:04:31,060
‫So if I say 50 percent space, 50 percent, that means we are going to have two columns.

67
00:04:31,370 --> 00:04:33,830
‫The first column size will be 50 percent.

68
00:04:33,860 --> 00:04:35,990
‫The second column size will be 50 percent.

69
00:04:36,320 --> 00:04:37,520
‫If I save this one.

70
00:04:37,580 --> 00:04:38,420
‫Get back here.

71
00:04:39,450 --> 00:04:40,290
‫Yup, that's one.

72
00:04:41,130 --> 00:04:43,440
‫OK, let me uncheck this great box.

73
00:04:43,830 --> 00:04:51,120
‫OK, so now we have two columns column one, column two, and we are following one two three four five

74
00:04:51,120 --> 00:04:51,430
‫six.

75
00:04:51,450 --> 00:04:54,040
‫This is the sequence that we are following now.

76
00:04:54,060 --> 00:05:00,420
‫If you click on this grade, you will see that we have divided nation like one column and two column.

77
00:05:01,050 --> 00:05:01,470
‫OK.

78
00:05:01,570 --> 00:05:02,640
‫Hope you got the idea.

79
00:05:03,300 --> 00:05:05,250
‫Now you can pass any type of value.

80
00:05:05,250 --> 00:05:09,240
‫You can pass pixels, you can pass them, you can pass percentage.

81
00:05:09,570 --> 00:05:14,330
‫And there is one other specific value that is designed specifically for.

82
00:05:14,460 --> 00:05:20,070
‫Yes, it's great that we will discuss in a while, but here, if I want to divide them into three columns,

83
00:05:20,070 --> 00:05:23,130
‫I can see percentage 50 again.

84
00:05:23,140 --> 00:05:28,020
‫And this is not going to set right because Matt doesn't work like this.

85
00:05:28,020 --> 00:05:30,270
‫So be our person and we cannot do this.

86
00:05:30,660 --> 00:05:37,600
‫So let's say 200 pixel, 500 pixels and then pixels, for example, save this one.

87
00:05:37,620 --> 00:05:39,540
‫Get back here now.

88
00:05:39,540 --> 00:05:45,780
‫Had this is 200 pixel, this is what is this 500 pixel and this is 10 pixel.

89
00:05:47,430 --> 00:05:50,880
‫Let me try to increase the topic, maybe under pixels, save this one.

90
00:05:52,130 --> 00:05:55,580
‫OK, so this is how column thing is going to work.

91
00:05:56,150 --> 00:05:56,590
‫Why?

92
00:05:56,690 --> 00:06:00,890
‫Because we are providing multiple values according to our own column.

93
00:06:01,220 --> 00:06:02,410
‫Remember this part?

94
00:06:02,950 --> 00:06:04,580
‫Or no, let me remove this one.

95
00:06:04,970 --> 00:06:12,500
‫Now there is one specific value that we can utilize only with spaces good, which is if my if I see

96
00:06:12,530 --> 00:06:13,290
‫one, if I.

97
00:06:14,450 --> 00:06:17,360
‫Wonderful and wonderful and save this one.

98
00:06:18,600 --> 00:06:24,900
‫Here you can see all of them are divided equally, so you can see these are three columns which are

99
00:06:24,900 --> 00:06:26,010
‫divided equally.

100
00:06:26,430 --> 00:06:27,990
‫Now what is this one I find?

101
00:06:28,080 --> 00:06:29,760
‫This is fractional unit.

102
00:06:30,210 --> 00:06:32,870
‫Now if I say wonderful, wonderful, wonderful.

103
00:06:33,120 --> 00:06:40,320
‫So in total, there are three fan that is heavily well spaced and we have divided into one ratio one

104
00:06:40,320 --> 00:06:47,460
‫ratio one nine five zero one four, three, four and one half of that means we total we have five space

105
00:06:47,730 --> 00:06:50,670
‫and then one ratio is given to this.

106
00:06:50,790 --> 00:06:54,960
‫One ratio is given to this column and three ratios given to this column.

107
00:06:54,960 --> 00:07:00,480
‫If I get back here, you can see one ratio, three ratio and one ratio.

108
00:07:01,080 --> 00:07:04,260
‫So that's how this is going to work and this is important.

109
00:07:04,650 --> 00:07:11,730
‫This helps us to keep our things in sequence and remember all the available spaces divided among these

110
00:07:11,730 --> 00:07:12,090
‫three.

111
00:07:12,390 --> 00:07:18,450
‫And if I tried to squeeze them and push them to the limited space, you will see most of this space

112
00:07:18,450 --> 00:07:19,050
‫is gone.

113
00:07:20,170 --> 00:07:21,820
‫So that's how this is going to work.

114
00:07:22,830 --> 00:07:27,480
‫Now, the way we have controlled our column in the similar way we can control our role.

115
00:07:28,080 --> 00:07:30,150
‫For example, currently we have two rules.

116
00:07:30,300 --> 00:07:33,960
‫So what I'm going to utilize is a great template too.

117
00:07:34,260 --> 00:07:37,050
‫And I am going to distribute them differently.

118
00:07:37,350 --> 00:07:42,930
‫One example, the first one, I am going to pass one apart, or I should add three or five for the first

119
00:07:42,930 --> 00:07:46,900
‫one and the second row, I'm going to pass five at five.

120
00:07:48,380 --> 00:07:51,440
‫So let's say three, five and five, four five.

121
00:07:52,040 --> 00:07:59,810
‫That means if total I have eighty pixels, I will pass 30 pics, including Vostro and 50 pixels to the

122
00:07:59,810 --> 00:08:00,410
‫second rope.

123
00:08:00,950 --> 00:08:05,810
‫And let me also give some space here for, let's say, if I have haidar's.

124
00:08:06,960 --> 00:08:10,560
‫8-Bit, for now, save this one.

125
00:08:10,650 --> 00:08:11,490
‫Get back here.

126
00:08:12,710 --> 00:08:20,030
‫Hey, you can see the example that means this is three far this complete row is three four and the second

127
00:08:20,030 --> 00:08:21,510
‫row is five five.

128
00:08:21,980 --> 00:08:24,320
‫So that's how this whole thing is going to work.

129
00:08:24,590 --> 00:08:29,960
‫Now this whole thing gave us too much control over our structure, what our layout.

130
00:08:30,350 --> 00:08:37,040
‫And if you remember the tool that we utilize, similarly, if I try to add three rows here and try to

131
00:08:37,040 --> 00:08:41,100
‫remove two here, you can see I can design things now.

132
00:08:41,120 --> 00:08:47,930
‫One thing we can do is we can have three column, then we can decrease the size of our current items

133
00:08:48,530 --> 00:08:54,260
‫and then we can decrease the size of our current row and design something similar, if you remember.

134
00:08:57,240 --> 00:09:01,140
‫Something like this, so I can design drawing and them in this way.

135
00:09:01,680 --> 00:09:07,320
‫Now we still have a lot of things to understand, like how to combine these four elements and also how

136
00:09:07,320 --> 00:09:08,820
‫to combine these two elements.

137
00:09:09,030 --> 00:09:11,310
‫We can do we can do later, don't worry.

138
00:09:11,550 --> 00:09:15,150
‫But I hope you got the idea how we are going to control things.

139
00:09:15,810 --> 00:09:16,280
‫OK.

140
00:09:16,770 --> 00:09:22,440
‫This looks great for now, and we have this understanding about great template as well as column.

141
00:09:23,100 --> 00:09:26,120
‫Now there is one on that property, which is known as Gap.

142
00:09:26,160 --> 00:09:34,110
‫So all the gaps that currently we have between our different type of elements, we can maintain them

143
00:09:34,290 --> 00:09:37,650
‫so we can have OK, we can utilize padding and other things.

144
00:09:38,040 --> 00:09:42,450
‫But by default, there is a thing with great, which is known as great gap.

145
00:09:43,350 --> 00:09:47,670
‫So there are two types great column gap and great row gap.

146
00:09:51,920 --> 00:09:56,570
‫Great column gap, and if I say one room here and save this one.

147
00:09:57,600 --> 00:09:59,850
‫You will see a gap between each column.

148
00:10:00,210 --> 00:10:03,330
‫Now, remember, the last one is not by our grade.

149
00:10:03,340 --> 00:10:04,620
‫This is by our padding.

150
00:10:04,860 --> 00:10:07,170
‫This whole green thing is by our padding.

151
00:10:07,740 --> 00:10:14,160
‫But the gap between these two column is biodegrade, so that is my grade column gap.

152
00:10:14,940 --> 00:10:18,810
‫And then if I try to add something similar for our row.

153
00:10:20,550 --> 00:10:21,450
‫Save this one.

154
00:10:22,230 --> 00:10:25,000
‫And this is going to be our great road gap.

155
00:10:25,800 --> 00:10:28,350
‫So that's how this whole great gap works.

156
00:10:29,420 --> 00:10:34,790
‫One quick disclaimer, remember, these both properties will not work in future.

157
00:10:35,150 --> 00:10:40,730
‫That means great quantum gap as well as grid rule gap will not work in future.

158
00:10:41,390 --> 00:10:45,800
‫Instead of this, you have to use quantum gap as well as rule gap.

159
00:10:46,400 --> 00:10:49,370
‫We will discuss about this later in the course also.

160
00:10:49,730 --> 00:10:52,310
‫But remember, currently I'm using great column gap.

161
00:10:52,700 --> 00:10:54,290
‫This is going to work right now.

162
00:10:54,410 --> 00:10:58,220
‫Absolutely fine, but in future, this method will not work.

163
00:10:58,610 --> 00:11:02,930
‫You have to use column gap instead of using grid program.

164
00:11:03,080 --> 00:11:04,730
‫You need to use rule gap.

165
00:11:05,240 --> 00:11:06,200
‫Remember this point?

166
00:11:06,650 --> 00:11:09,470
‫These two properties might not work in future.

167
00:11:09,620 --> 00:11:10,580
‫So better use.

168
00:11:10,820 --> 00:11:12,560
‫Quantum gap, as well as rule gap.

169
00:11:13,130 --> 00:11:16,370
‫And don't worry, we will discuss about them in future also.

170
00:11:17,520 --> 00:11:22,740
‫Now, by default, when we divide things, everything is going to take one item, so if I divide anything

171
00:11:22,740 --> 00:11:26,310
‫in the terms of column and row, we are going to take one item each.

172
00:11:26,820 --> 00:11:27,300
‫OK.

173
00:11:27,450 --> 00:11:29,310
‫So all of this is working fine.

174
00:11:29,430 --> 00:11:34,500
‫And remember, we are going to talk about that shorthand property or this whole column and row.

175
00:11:34,520 --> 00:11:38,160
‫We'll be talking about charting property for this gap also.

176
00:11:38,880 --> 00:11:41,350
‫So that's all for this lecture now.

177
00:11:41,370 --> 00:11:46,110
‫I hope you got the basic idea how we are going to work with Grade nine, the next lecture.

178
00:11:46,110 --> 00:11:47,700
‫Let us advance some stuff.

179
00:11:47,700 --> 00:11:54,450
‫Talk about either shorten tricks, talk about how to add more content and design it and then play with

180
00:11:54,450 --> 00:11:54,990
‫some game.

181
00:11:55,710 --> 00:11:57,270
‫I hope this lecture was helpful.

182
00:11:57,420 --> 00:11:58,500
‫Thank you for calling.

183
00:11:58,590 --> 00:12:00,390
‫And I see you guys in the next one.