1
00:00:00,060 --> 00:00:07,280
So what does it mean to display something as great after we assign an element, the display great property,

2
00:00:07,680 --> 00:00:14,100
it will define the element as a grid container and establish a new grid format in context for its content.

3
00:00:15,110 --> 00:00:21,350
But just by displaying it as it is not enough, we also need to specify the grid template columns and

4
00:00:21,350 --> 00:00:22,610
the grid template rules.

5
00:00:24,220 --> 00:00:30,070
They will define the columns and rows of the grid with a space separated list of values.

6
00:00:31,780 --> 00:00:38,020
These values represent the track size and the space between the represent the great line.

7
00:00:39,950 --> 00:00:46,340
Also, please note that when you leave an empty space between trek values, the grid lines are automatically

8
00:00:46,340 --> 00:00:48,590
assigned positive and negative numbers.

9
00:00:49,160 --> 00:00:51,270
OK, so let's start displaying something that's great.

10
00:00:51,650 --> 00:00:54,200
So let's go back into our success.

11
00:00:54,200 --> 00:00:56,870
And we have up here a container.

12
00:00:56,950 --> 00:00:59,270
I still want to do some styling to our container.

13
00:00:59,280 --> 00:01:02,180
So let's go down here and set the color.

14
00:01:04,550 --> 00:01:08,780
To hash it out, give a white collar.

15
00:01:15,300 --> 00:01:16,300
I have.

16
00:01:18,450 --> 00:01:22,350
I was going to give the border a radius of 10 pixels.

17
00:01:26,080 --> 00:01:27,670
I text the to the center.

18
00:01:35,170 --> 00:01:41,770
Some font size also going to increase the font size Tulasi, one point three RAM.

19
00:01:43,570 --> 00:01:52,840
And also to have the border one pixel solid, and if I don't type in any color, then the border will

20
00:01:52,840 --> 00:01:55,400
be as the specific color.

21
00:01:55,870 --> 00:01:57,360
So let's take a look.

22
00:02:00,400 --> 00:02:03,280
Yeah, our text is gone because there's a song in here.

23
00:02:04,690 --> 00:02:05,980
But what about it?

24
00:02:06,420 --> 00:02:09,520
We are now going to select a great container.

25
00:02:11,140 --> 00:02:12,730
Actually, this would be the great items.

26
00:02:13,270 --> 00:02:17,560
Sorry about that, this are the great items agreed on the score items.

27
00:02:19,260 --> 00:02:21,630
I can select all items.

28
00:02:23,830 --> 00:02:26,320
Now, I want to have four items.

29
00:02:28,640 --> 00:02:36,110
A special selecter, which is the 10th child, and with this I'm going to select and the child and select

30
00:02:36,110 --> 00:02:37,460
all of the odds.

31
00:02:39,930 --> 00:02:43,920
And by having one of the unselected going to change the background color.

32
00:02:51,390 --> 00:02:52,110
To orange.

33
00:02:54,180 --> 00:02:55,350
Let's let's take a look.

34
00:02:55,530 --> 00:02:57,630
Hey, there we go, and the Even's.

35
00:03:00,580 --> 00:03:02,110
So I'm just going to copy this.

36
00:03:05,280 --> 00:03:12,300
And pasted in on the left and that's changed is odd to even this is select all of the even elements.

37
00:03:15,190 --> 00:03:16,600
And it's changed the color to red.

38
00:03:19,450 --> 00:03:20,980
OK, so we have this on the.

39
00:03:22,010 --> 00:03:25,340
Now, I just want to have this in order for you to see the differences between the items.

40
00:03:27,510 --> 00:03:34,020
OK, not a the great container, which is actually class, so let's go in here, great tache.

41
00:03:36,860 --> 00:03:37,550
Container.

42
00:03:39,610 --> 00:03:45,880
OK, no selecting this container, which will contain items.

43
00:03:47,880 --> 00:03:53,640
So let's go back into this grid container and let's do a bit of the basic starling's, I'm going to

44
00:03:53,640 --> 00:03:59,130
change the background color to hash free, free, free range to set the color within it.

45
00:03:59,970 --> 00:04:02,550
The white color to the hash epithet.

46
00:04:04,750 --> 00:04:06,460
And I'm going to set back Chateau.

47
00:04:08,000 --> 00:04:11,780
The zero zero 10 pixels in a span of two pixels.

48
00:04:13,310 --> 00:04:20,510
OK, and let's also limit the height of the container to 300 pixels for now at least.

49
00:04:21,570 --> 00:04:23,040
OK, let's take a look.

50
00:04:23,070 --> 00:04:24,390
There's our container.

51
00:04:27,140 --> 00:04:32,420
So let me I hope we can all see this little schism between.

52
00:04:34,910 --> 00:04:40,880
To want to have this at 200 percent and this also puts something.

53
00:04:43,480 --> 00:04:54,460
OK, now we need to do is display this as grid, so let's go back into access and type in display grid.

54
00:04:56,680 --> 00:05:03,190
Now, as soon as we do this, our items are not displayed as good, but as I said, and that also activate

55
00:05:03,190 --> 00:05:07,030
our only grid in Firefox and hey, there we go.

56
00:05:07,160 --> 00:05:08,230
There's a grid system.

57
00:05:08,380 --> 00:05:11,290
You also have a graphic representation of the grid right here.

58
00:05:11,290 --> 00:05:17,070
And if you go through this, you will hover actually over each and every element of the grid systems

59
00:05:17,080 --> 00:05:21,580
or each of the children and will go back into access.

60
00:05:22,450 --> 00:05:25,410
And now let's start displaying as grid.

61
00:05:25,630 --> 00:05:30,250
Now let's start learning about grid template, row and column like this.

62
00:05:30,250 --> 00:05:31,720
We're just going to type it grid.

63
00:05:33,060 --> 00:05:41,460
That template and column, not multiple ways of defining the columns with we just need to type in here

64
00:05:41,460 --> 00:05:47,040
numbers, we could start off with pixels and I'm going to start with pixels and then we're going to

65
00:05:47,370 --> 00:05:49,200
go into our unit.

66
00:05:49,710 --> 00:05:52,740
Now, let's say we want to have two great columns.

67
00:05:54,730 --> 00:06:02,110
And as long as we are in great template column, this means that we will have one row and will define

68
00:06:02,110 --> 00:06:06,700
the number of columns for each value that we type in here.

69
00:06:07,480 --> 00:06:09,610
Eight column with will be defined.

70
00:06:09,640 --> 00:06:15,070
So if I type in here only, let's say 80 pixels hit save.

71
00:06:16,530 --> 00:06:17,760
Now, let's see what happened.

72
00:06:18,360 --> 00:06:24,660
We have one column, one row and one column of a width of eight pixels.

73
00:06:25,540 --> 00:06:28,210
You can also see the traffic representation right here.

74
00:06:28,800 --> 00:06:36,120
Now, if you go back in here and on the great columns, you type in in excess of one hundred fifty,

75
00:06:36,120 --> 00:06:43,980
let's say pixels and go in here and not only have two columns, one column is eight pixels wide and

76
00:06:43,980 --> 00:06:46,620
the next one is 150 pixels wide.

77
00:06:48,050 --> 00:06:54,440
Not quite with it has a width of eight pixels and a width of 150 pixels.

78
00:06:55,380 --> 00:06:58,250
OK, now we could continue on with this.

79
00:06:58,260 --> 00:07:01,070
Let's say we want a 250 pixel.

80
00:07:02,870 --> 00:07:08,360
Column, so the first column and there we go and let's say then we want a.

81
00:07:10,130 --> 00:07:12,140
Let's call them 60 pesos.

82
00:07:15,150 --> 00:07:15,870
And there we go.

83
00:07:16,200 --> 00:07:24,810
Well, let's call now what would happen if I want to have two equal with columns so on the left side

84
00:07:25,230 --> 00:07:30,730
and on the right side, and I'm let's just say we're limited.

85
00:07:30,750 --> 00:07:34,860
We want to have two columns of one hundred and one hundred pixels.

86
00:07:35,250 --> 00:07:36,700
And on the right side we want to have.

87
00:07:36,720 --> 00:07:38,670
So that's two hundred pixels now.

88
00:07:39,960 --> 00:07:40,960
Let me think about it.

89
00:07:40,980 --> 00:07:49,530
We have several hundred pixels, so 100 here, 100 here, there's 200 for the 150 here and 150 here,

90
00:07:49,920 --> 00:07:50,880
the 300.

91
00:07:51,090 --> 00:07:54,120
So we're left with 200 pixels.

92
00:07:54,340 --> 00:07:59,640
The sum of this is 500 and 700, minus five minus five hundred is 200.

93
00:08:00,030 --> 00:08:02,780
So how can we achieve that within the middle?

94
00:08:03,120 --> 00:08:05,400
It should be exactly the rest of the width.

95
00:08:05,560 --> 00:08:11,460
Now, we could do something like this, change the first 100, then the second one to 100.

96
00:08:13,870 --> 00:08:18,040
OK, this would be one hundred fifty and this would be.

97
00:08:19,070 --> 00:08:23,240
Also, 150 in a city.

98
00:08:23,300 --> 00:08:29,510
Let's see what happened, we got to Collins, but in the middle, I still want to have so I want this,

99
00:08:29,510 --> 00:08:34,160
too, to be on the left side and this still to be on the right side, not we could do something like

100
00:08:34,760 --> 00:08:37,130
in the middle of them will type in hit auto.

101
00:08:37,850 --> 00:08:44,030
And what what and what this will do is will take up the rest of the space and.

102
00:08:45,060 --> 00:08:54,150
Divide it up into the rest of the amount, so let's see if we go over here, you can see all over our

103
00:08:54,150 --> 00:09:00,650
columns, if I hover over the columns on the left side, overall columns, they will be displayed.

104
00:09:01,470 --> 00:09:04,170
So it has a 200 on 300.

105
00:09:04,440 --> 00:09:07,980
And because we're zoomed in two hundred percent and you need to zoom out.

106
00:09:10,150 --> 00:09:17,050
So there we go, but I don't think you can say this is the reason that I was displaying the double amount

107
00:09:17,050 --> 00:09:19,600
is because I am zoomed in double the size.

108
00:09:20,360 --> 00:09:21,990
So let me go in here.

109
00:09:22,000 --> 00:09:26,960
And that is zooming again to 200 is actually multiplying.

110
00:09:26,980 --> 00:09:33,060
So it's actually one hundred and one of the 50 height, but it's 200 and 300 split.

111
00:09:33,430 --> 00:09:40,630
So we know that the first are 100 and in our case 200 and the rest within it is well the rest that just

112
00:09:40,630 --> 00:09:47,580
remains because the next two are 150 or multiply it by two, three hundred and 300 white.

113
00:09:47,860 --> 00:09:53,580
OK, let's go back in here in our container and now let's start displaying the great growth.

114
00:09:53,980 --> 00:09:58,210
So that's the great template and role.

115
00:09:58,630 --> 00:10:03,460
And what this will do is Will specified the height of the roles.

116
00:10:03,820 --> 00:10:10,870
And as soon as we type in more than one value, for example, I want the world to be only 25 pixels

117
00:10:11,110 --> 00:10:12,700
and I'm going to use pixels right now.

118
00:10:12,700 --> 00:10:16,120
But after this, we're going to change our unit values.

119
00:10:16,400 --> 00:10:18,270
So 25 pixels.

120
00:10:18,280 --> 00:10:18,970
Let's take a look.

121
00:10:19,510 --> 00:10:23,490
First of all, is 25 pixel height has a height of 25 pixels.

122
00:10:23,620 --> 00:10:25,320
So let's go down here.

123
00:10:25,330 --> 00:10:29,560
Let's create a second row of 150 pixels.

124
00:10:33,130 --> 00:10:37,840
OK, there's a second rule, if it is 200, but we know it's.

125
00:10:39,060 --> 00:10:45,840
Actually, one hundred pixels and let's say that the rest, we want to leave it as auto.

126
00:10:50,450 --> 00:10:51,500
All right, there we go.

127
00:10:52,460 --> 00:10:58,670
So let me just changes to two hundred fifty, our fourth value.

128
00:11:01,180 --> 00:11:06,340
And this is almost out of a great a larger.

129
00:11:09,840 --> 00:11:18,090
And now let's say I want to have instead of the pixels, a percentage, so if I change just 25 to 35

130
00:11:18,090 --> 00:11:20,760
pixel to 25 percent, let's see what happens.

131
00:11:21,270 --> 00:11:26,180
This just took up 25 percent of our remaining height.

132
00:11:26,190 --> 00:11:30,870
We have here all it will take off 25 percent of three hundred pixels.

133
00:11:30,870 --> 00:11:35,500
We knew we know that our container is in our container.

134
00:11:35,520 --> 00:11:37,830
It has a height of 300.

135
00:11:38,700 --> 00:11:40,500
We took up 100 pixels.

136
00:11:40,830 --> 00:11:44,400
We took a 25 percent and we left the rest with auto.

137
00:11:45,210 --> 00:11:48,750
Now, let me change this fellow right here to Collum.

138
00:11:54,310 --> 00:12:02,650
So instead of them patrols, we now have columns, we have 25 percent on the left side, then for the

139
00:12:02,650 --> 00:12:06,520
first column, then 100 pixels for a second column, and the rest is Ottos.

140
00:12:06,560 --> 00:12:07,510
Let's see how this looks.

141
00:12:07,870 --> 00:12:11,070
So 25 percent for our first one.

142
00:12:11,710 --> 00:12:14,490
Then we have a 100 pixel column.

143
00:12:14,500 --> 00:12:21,580
So with two time zoom is 200 and the rest is automatically the rest of the width is then automatically

144
00:12:21,580 --> 00:12:24,190
assigned the of this.

145
00:12:24,200 --> 00:12:26,380
We're going to use a great template roll again.

146
00:12:27,640 --> 00:12:33,760
And let's the 300 pixels and let's see what happens.

147
00:12:33,790 --> 00:12:40,600
This would take up the entire with and can you see if you can see this and take out the numbers?

148
00:12:41,050 --> 00:12:47,560
Actual elements are now pushed outside of the container because with our first row, we took about three

149
00:12:47,560 --> 00:12:48,490
hundred pixels.

150
00:12:48,760 --> 00:12:50,710
You can see down here this corner.

151
00:12:50,970 --> 00:12:54,930
That is why I have my items as a rounded border.

152
00:12:55,360 --> 00:13:00,330
We actually pushed out the fourth, the fifth and the sixth item outside of our container.

153
00:13:01,840 --> 00:13:08,090
So you get you need to be extremely careful when you're assigning space to remain within your column.

154
00:13:08,530 --> 00:13:10,210
OK, so let me take this out.

155
00:13:10,210 --> 00:13:13,210
Let's say two hundred and there we go.

156
00:13:13,210 --> 00:13:19,540
Now we have two hundred for our first column for first row and 100 for a second row, because that's

157
00:13:19,540 --> 00:13:21,160
the remaining height.

158
00:13:25,520 --> 00:13:36,460
Now, let's say we want to have something like a template column and we want to have two to four massive

159
00:13:36,460 --> 00:13:41,070
three columns of one hundred seventy five pixels.

160
00:13:41,090 --> 00:13:49,030
So we would do 175 pixels when I was 35 pixels, 175 pixels in a K.

161
00:13:49,610 --> 00:13:52,220
Now we could do something else.

162
00:13:53,280 --> 00:14:01,170
Instead of defining one of the first 135, we could do great template column and then we would type

163
00:14:01,170 --> 00:14:08,910
in repeat and within the repeat value we need to values, we need, first of all, the amount that we

164
00:14:08,910 --> 00:14:09,860
want to repeat with.

165
00:14:10,110 --> 00:14:15,280
So let's say free then comma and the amount that should be repeated.

166
00:14:15,300 --> 00:14:21,240
So in this case, 175 pixels, unless it's safe and we have the exactly the same result.

167
00:14:21,240 --> 00:14:28,860
If I would change this to say two hundred, two hundred pixels hit save and now we have two hundred

168
00:14:28,860 --> 00:14:34,320
pixels and just verify this four hundred and this is 200 multiplied by two.

169
00:14:37,330 --> 00:14:41,830
We could also do this with percentages, solar companies instead of the.

170
00:14:43,200 --> 00:14:45,480
Twenty pesos I would do for the.

171
00:14:46,720 --> 00:14:48,310
Out of 30 percent.

172
00:14:50,540 --> 00:14:54,800
XOS percent give us it's eight and there we go.

173
00:14:56,120 --> 00:14:58,460
Good dose of 35, but.

174
00:15:00,520 --> 00:15:08,950
This should push out, yep, it just pushed other elements outside of column cannot see the rest the

175
00:15:09,100 --> 00:15:10,590
edge of our container.

176
00:15:14,440 --> 00:15:19,120
And we could also do, let's say, four times.

177
00:15:22,690 --> 00:15:23,620
R e m.

178
00:15:27,300 --> 00:15:29,010
Or, for example, E.M..

179
00:15:32,970 --> 00:15:41,730
Now, instead of this, instead of using pixels, percentages in the ATM, we could do something else,

180
00:15:41,730 --> 00:15:42,890
use fractions.

181
00:15:43,710 --> 00:15:50,820
You saw that in order to to have the exact with for example, with percentages, I would need to do

182
00:15:50,820 --> 00:15:53,520
something like three forty five point.

183
00:15:55,190 --> 00:16:04,810
135, 350, something like that, and let me comment on this one, so this will take it's not exactly

184
00:16:05,320 --> 00:16:12,820
so a specific element divided into three equal parts is thirty three point three fifty 50 50 to almost

185
00:16:12,820 --> 00:16:13,210
infinite.

186
00:16:13,840 --> 00:16:16,080
But we could do something else now.

187
00:16:16,090 --> 00:16:16,410
Great.

188
00:16:16,420 --> 00:16:17,020
Let's us.

189
00:16:17,020 --> 00:16:17,680
Let's us.

190
00:16:17,950 --> 00:16:19,420
Let's let.

191
00:16:20,420 --> 00:16:25,190
This was great, let us use something called friction.

192
00:16:25,790 --> 00:16:35,570
Now, what this does, let's say repeat and we'll repeat three times one fraction of F are not set save

193
00:16:35,570 --> 00:16:36,520
and let's see what happens.

194
00:16:37,910 --> 00:16:39,270
It's exactly the same thing.

195
00:16:40,280 --> 00:16:46,610
What this does is it divides our maximum width of the container into exactly three fractions.

196
00:16:47,000 --> 00:16:55,520
So if I could do here for fractions, then we we would have four columns for equal columns, I must

197
00:16:55,520 --> 00:16:56,130
specify.

198
00:16:57,560 --> 00:17:06,650
Now, we can also do great template column one too far, and this would create only one fraction.

199
00:17:08,190 --> 00:17:10,080
We could do to a far.

200
00:17:13,780 --> 00:17:19,770
Also, note that one of our fathers would quit, too, but if I would change this.

201
00:17:22,160 --> 00:17:28,190
Through the first column is one faction and the second one is two factions, then we would have something

202
00:17:28,190 --> 00:17:29,290
like this here.

203
00:17:29,300 --> 00:17:37,040
So this would be actually fifty four point forty three percent and the next one would be sixty six point

204
00:17:37,040 --> 00:17:38,930
sixty six percent.

205
00:17:42,540 --> 00:17:49,980
And we can now play around with this, we could also use a template column and let's say we have here

206
00:17:49,980 --> 00:17:53,820
in the middle of 20 percent and then one fraction.

207
00:17:53,850 --> 00:17:55,530
So this would look like this.

208
00:17:56,160 --> 00:17:57,780
And we could also use.

209
00:17:59,870 --> 00:18:09,560
I just saw up here our efforts are going to say four times and two percent see what this does, OK?

210
00:18:10,710 --> 00:18:12,960
Now, that's pretty much it for displaying good temper.

211
00:18:13,910 --> 00:18:16,470
And of course, you could do the same thing for good template.

212
00:18:16,810 --> 00:18:18,870
So let me just step in here.

213
00:18:18,910 --> 00:18:25,350
Great template, real and repeat three times.

214
00:18:26,220 --> 00:18:27,440
Wonderful essay.

215
00:18:28,530 --> 00:18:30,650
And then we have our free throws.

216
00:18:30,910 --> 00:18:33,660
OK, so that's pretty much it for Gridiron Patrol and column.

217
00:18:33,660 --> 00:18:35,520
And seen the next one by.