Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,480 --> 00:00:02,620
Welcome back
2
00:00:02,620 --> 00:00:06,270
after that hopefully helpful theory lecture.
3
00:00:06,270 --> 00:00:09,070
So now let's keep talking about creating
4
00:00:09,070 --> 00:00:12,463
and sizing grid columns and grid rows.
5
00:00:14,030 --> 00:00:17,520
So in our very first lecture about CSS Grid,
6
00:00:17,520 --> 00:00:20,190
we already learned how to create columns
7
00:00:20,190 --> 00:00:22,800
and rows like this.
8
00:00:22,800 --> 00:00:24,040
Right?
9
00:00:24,040 --> 00:00:29,040
Now for me, actually, most of the magic of CSS Grid comes
10
00:00:29,170 --> 00:00:33,840
from a very new unit, which is the fr unit.
11
00:00:33,840 --> 00:00:38,410
So using the fr unit here instead of pixels
12
00:00:38,410 --> 00:00:42,210
will allow us to very easily create flexible columns,
13
00:00:42,210 --> 00:00:44,280
and flexible rows.
14
00:00:44,280 --> 00:00:47,470
So again, using pixels allows us
15
00:00:47,470 --> 00:00:51,710
to only give these tracks very rigid dimensions.
16
00:00:51,710 --> 00:00:56,490
So these here are always 200 pixels, no matter what.
17
00:00:56,490 --> 00:01:00,550
So if I resize this like this or like this,
18
00:01:00,550 --> 00:01:04,450
the size always stays the same here of these columns.
19
00:01:04,450 --> 00:01:05,660
Right?
20
00:01:05,660 --> 00:01:10,660
So at some point it even over float the container, right?
21
00:01:11,150 --> 00:01:14,600
And so many times that is not what we need.
22
00:01:14,600 --> 00:01:18,610
And instead we want flexible columns and rows.
23
00:01:18,610 --> 00:01:20,470
And so, as I said in the beginning,
24
00:01:20,470 --> 00:01:24,220
for that we can use the new fr unit.
25
00:01:24,220 --> 00:01:25,620
So let's say for example,
26
00:01:25,620 --> 00:01:28,410
that we want this last column here
27
00:01:28,410 --> 00:01:31,193
to always fill up all the remaining space.
28
00:01:32,120 --> 00:01:34,580
Or maybe let's say this column.
29
00:01:34,580 --> 00:01:36,160
All right.
30
00:01:36,160 --> 00:01:38,730
Let's just decrease this spacing a little bit
31
00:01:38,730 --> 00:01:40,770
so we can see it better.
32
00:01:40,770 --> 00:01:42,083
Maybe this one as well.
33
00:01:43,150 --> 00:01:44,200
Okay.
34
00:01:44,200 --> 00:01:47,500
So clearly, here we have this empty space
35
00:01:47,500 --> 00:01:49,920
that is waiting to be filled.
36
00:01:49,920 --> 00:01:52,250
And so let's fill that very easily
37
00:01:52,250 --> 00:01:54,533
with this third column in this case.
38
00:01:55,730 --> 00:01:59,680
So the third column is this one, right?
39
00:01:59,680 --> 00:02:03,680
And so here, instead of specifying a fixed pixel value,
40
00:02:03,680 --> 00:02:05,383
let's specify '1fr',
41
00:02:06,910 --> 00:02:10,480
which stands for fractional or just fraction.
42
00:02:10,480 --> 00:02:12,930
And if I give it a save now,
43
00:02:12,930 --> 00:02:16,610
then you see that this column has been expanded
44
00:02:16,610 --> 00:02:20,070
in order to fill all the available empty space.
45
00:02:20,070 --> 00:02:24,590
So it's a little bit like setting flex to '1' in flexbox.
46
00:02:24,590 --> 00:02:25,860
Right?
47
00:02:25,860 --> 00:02:30,860
And so now as we adjust the size here of the window,
48
00:02:31,000 --> 00:02:33,950
then you see that it always keeps expanding
49
00:02:33,950 --> 00:02:36,253
to fit all the available space.
50
00:02:37,190 --> 00:02:39,400
So now here it's getting really small
51
00:02:39,400 --> 00:02:41,040
and so at a certain point,
52
00:02:41,040 --> 00:02:43,480
it still needs to fit the content.
53
00:02:43,480 --> 00:02:47,230
And so therefore then our grid will again overflow.
54
00:02:47,230 --> 00:02:49,610
But at all these other width,
55
00:02:49,610 --> 00:02:51,680
then this column here will attempt
56
00:02:51,680 --> 00:02:53,523
to fill all the remaining space.
57
00:02:54,590 --> 00:02:58,140
Okay, let's try the same with this one.
58
00:02:58,140 --> 00:03:00,913
So we can also set this one to the same value.
59
00:03:01,790 --> 00:03:05,770
So also '1fr' and so if we do that,
60
00:03:05,770 --> 00:03:08,570
then what do you think will happen to these two columns?
61
00:03:10,160 --> 00:03:11,610
And that's right.
62
00:03:11,610 --> 00:03:13,850
They are now the exact same size
63
00:03:13,850 --> 00:03:18,850
because they have the exact same value here for the fr unit.
64
00:03:19,270 --> 00:03:20,580
All right.
65
00:03:20,580 --> 00:03:24,080
And so again, they are now the same size
66
00:03:24,080 --> 00:03:28,330
and if we resize, then both of them are trying
67
00:03:28,330 --> 00:03:30,700
to fill the remaining empty space.
68
00:03:30,700 --> 00:03:33,980
And they do that basically in the same proportion,
69
00:03:33,980 --> 00:03:36,703
because they both have the same value here.
70
00:03:38,960 --> 00:03:40,210
All right.
71
00:03:40,210 --> 00:03:42,350
And I will show you in a second what happens
72
00:03:42,350 --> 00:03:44,653
when we give them here different values.
73
00:03:46,000 --> 00:03:47,180
All right.
74
00:03:47,180 --> 00:03:49,790
But for now, I actually want you to think
75
00:03:49,790 --> 00:03:52,020
about how we can create a grid
76
00:03:52,020 --> 00:03:55,360
where all the columns are the same width.
77
00:03:55,360 --> 00:03:58,800
So I want you to pause the video here and create a grid
78
00:03:58,800 --> 00:04:02,490
where all four columns have the same width.
79
00:04:02,490 --> 00:04:04,990
Then you can do the same for two columns
80
00:04:04,990 --> 00:04:06,780
and for three columns.
81
00:04:06,780 --> 00:04:08,080
All right.
82
00:04:08,080 --> 00:04:10,200
So experiment a little bit with that
83
00:04:10,200 --> 00:04:12,150
and I'll see you back here in a minute.
84
00:04:13,530 --> 00:04:14,770
All right.
85
00:04:14,770 --> 00:04:18,140
So hopefully you spent a minute doing that
86
00:04:18,140 --> 00:04:21,840
and here I will now actually copy this
87
00:04:21,840 --> 00:04:23,950
and then turn this one off,
88
00:04:23,950 --> 00:04:25,673
just so we keep this code here.
89
00:04:27,160 --> 00:04:30,240
But now hopefully you arrived at the solution
90
00:04:30,240 --> 00:04:33,710
that if we want four columns with the same width,
91
00:04:33,710 --> 00:04:36,163
we need to set all of these hear to '1fr'.
92
00:04:38,800 --> 00:04:41,410
So '1fr' all of them.
93
00:04:41,410 --> 00:04:43,730
And so now, no matter what,
94
00:04:43,730 --> 00:04:45,823
they will always have the same size.
95
00:04:48,080 --> 00:04:49,220
Right?
96
00:04:49,220 --> 00:04:52,270
So this is very powerful and very useful
97
00:04:52,270 --> 00:04:55,073
and we do this kind of thing all the time.
98
00:04:58,320 --> 00:05:00,630
And if we remove one of them,
99
00:05:00,630 --> 00:05:04,020
then we will end up only with three columns,
100
00:05:04,020 --> 00:05:06,570
but they still have all the same size.
101
00:05:06,570 --> 00:05:09,630
So they all try to fill up the available space
102
00:05:09,630 --> 00:05:11,463
and all in the same proportion.
103
00:05:12,300 --> 00:05:16,690
And the same, of course, for just two columns.
104
00:05:16,690 --> 00:05:20,490
But let's put it back to four columns like this.
105
00:05:20,490 --> 00:05:23,910
So let's quickly review what's happening here.
106
00:05:23,910 --> 00:05:25,510
So in this grid container,
107
00:05:25,510 --> 00:05:29,340
there is basically initially all of this empty space here.
108
00:05:29,340 --> 00:05:32,810
So all the way from this side to this side.
109
00:05:32,810 --> 00:05:37,260
And then as we use the fr unit here like this,
110
00:05:37,260 --> 00:05:41,050
then all of that empty space will get divided up equally
111
00:05:41,050 --> 00:05:42,970
between these four columns
112
00:05:42,970 --> 00:05:46,890
and that is because each of them has the same value here.
113
00:05:46,890 --> 00:05:49,100
So each of them is one,
114
00:05:49,100 --> 00:05:50,750
but now let's see what happened
115
00:05:50,750 --> 00:05:54,213
if we changed one of them to two, for example.
116
00:05:55,440 --> 00:05:57,360
So let's see.
117
00:05:57,360 --> 00:05:59,920
And now this one here gets double the space,
118
00:05:59,920 --> 00:06:02,450
than all the other columns.
119
00:06:02,450 --> 00:06:07,220
So now the space basically is divided into five fractions.
120
00:06:07,220 --> 00:06:11,990
So two plus one, plus one, plus one is five fractions.
121
00:06:11,990 --> 00:06:14,540
And so out of these five fractions,
122
00:06:14,540 --> 00:06:17,150
the first column gets two of them
123
00:06:17,150 --> 00:06:20,730
and the remaining ones get each of them each.
124
00:06:20,730 --> 00:06:25,000
And the same is true as we keep increasing the size here.
125
00:06:25,000 --> 00:06:27,470
Let's say, three.
126
00:06:27,470 --> 00:06:31,480
Then this should now have half of the space.
127
00:06:31,480 --> 00:06:35,713
And to see this in reality, let's make this a bit bigger.
128
00:06:37,400 --> 00:06:38,420
Right?
129
00:06:38,420 --> 00:06:40,960
And let's inspect this also,
130
00:06:40,960 --> 00:06:42,623
just so we see that this is true.
131
00:06:43,470 --> 00:06:47,323
So this grid now has a width of 1096,
132
00:06:48,680 --> 00:06:52,453
so let's make it a bit smaller.
133
00:06:55,050 --> 00:06:57,180
So I want to make it a thousand pixels
134
00:06:57,180 --> 00:06:58,780
to make it easier to understand.
135
00:07:00,890 --> 00:07:02,600
And that's close enough.
136
00:07:02,600 --> 00:07:06,350
And so this one here gets approximately 500 pixels,
137
00:07:06,350 --> 00:07:07,730
which is half
138
00:07:07,730 --> 00:07:11,403
and then these other columns here have a lot less.
139
00:07:12,950 --> 00:07:17,320
So that's basically a sixth of the available space.
140
00:07:17,320 --> 00:07:20,470
And I know that this one here is half
141
00:07:20,470 --> 00:07:23,280
because now we have six units.
142
00:07:23,280 --> 00:07:27,650
So three plus one, plus one, plus one is six.
143
00:07:27,650 --> 00:07:31,583
And the first one gets three, which is half, right?
144
00:07:33,690 --> 00:07:37,570
So this is very important stuff and very helpful.
145
00:07:37,570 --> 00:07:39,270
And just like in flexbox,
146
00:07:39,270 --> 00:07:43,700
this allows us to not having to specify width manually.
147
00:07:43,700 --> 00:07:44,533
Okay.
148
00:07:44,533 --> 00:07:48,330
Now going back here to equal-sized columns,
149
00:07:48,330 --> 00:07:50,810
I actually want to show you something else.
150
00:07:50,810 --> 00:07:54,440
So here we can also specify the 'auto' keyword
151
00:07:54,440 --> 00:07:56,603
instead of one of these units.
152
00:07:58,030 --> 00:08:02,200
So if we say 'auto' for example on the fourth column,
153
00:08:02,200 --> 00:08:05,200
then it will only take exactly the size
154
00:08:05,200 --> 00:08:09,060
that is necessary to fill it's content.
155
00:08:09,060 --> 00:08:10,860
And many times in practice,
156
00:08:10,860 --> 00:08:13,030
this is actually exactly what we need
157
00:08:13,030 --> 00:08:15,150
for one of the columns.
158
00:08:15,150 --> 00:08:18,680
So this one here is important to keep in mind.
159
00:08:18,680 --> 00:08:20,280
Okay.
160
00:08:20,280 --> 00:08:23,100
But let's once again turn this off
161
00:08:23,100 --> 00:08:26,823
because now I want to even show you something else again.
162
00:08:27,890 --> 00:08:32,890
So let's write 'grid-template-columns' again,
163
00:08:32,940 --> 00:08:35,400
because there is actually an easier way
164
00:08:35,400 --> 00:08:39,870
of writing a four times fr like we did here.
165
00:08:39,870 --> 00:08:43,950
So instead, CSS Grid introduced a repeat function
166
00:08:43,950 --> 00:08:48,950
where we can simply write 'repeat' then open parenthesis,
167
00:08:50,050 --> 00:08:52,840
and then write how many columns you want
168
00:08:52,840 --> 00:08:54,703
and how large they should be.
169
00:08:55,630 --> 00:08:59,770
So let's say '1fr' and there we go.
170
00:08:59,770 --> 00:09:04,693
So this is equivalent to just writing '1fr' four times.
171
00:09:05,560 --> 00:09:07,500
And so one more time,
172
00:09:07,500 --> 00:09:10,643
CSS Grid is making our life a lot easier.
173
00:09:12,300 --> 00:09:14,020
Let's remove this here.
174
00:09:14,020 --> 00:09:17,401
And of course, this could just be '3'
175
00:09:17,401 --> 00:09:20,350
and then we would get another row here.
176
00:09:20,350 --> 00:09:23,970
And this row by the way, is called an implicit row
177
00:09:23,970 --> 00:09:27,360
while these two here are called explicit rows.
178
00:09:27,360 --> 00:09:30,000
And that's because these first two rows,
179
00:09:30,000 --> 00:09:34,620
we actually did specify some sizes for them, right?
180
00:09:34,620 --> 00:09:38,300
And so we explicitly defined these two rows
181
00:09:38,300 --> 00:09:40,940
while this third one here was basically
182
00:09:40,940 --> 00:09:42,760
just added automatically
183
00:09:42,760 --> 00:09:46,520
because we run out of space in the grid that we defined.
184
00:09:46,520 --> 00:09:49,580
And so this row here that was added automatically
185
00:09:49,580 --> 00:09:51,940
is called an implicit row.
186
00:09:51,940 --> 00:09:55,900
And in fact, we do have a way of styling implicit rows,
187
00:09:55,900 --> 00:09:59,120
but that is outside the scope of this course.
188
00:09:59,120 --> 00:10:02,580
So usually, we just always define an explicit grid
189
00:10:02,580 --> 00:10:06,113
like we did here, so by using these two properties.
190
00:10:07,170 --> 00:10:08,873
So let's set it back to '4'
191
00:10:10,000 --> 00:10:12,850
and now let's move on quickly to rows
192
00:10:12,850 --> 00:10:17,673
because the fr unit is actually also available on rows.
193
00:10:19,000 --> 00:10:20,930
So let's try that.
194
00:10:20,930 --> 00:10:22,420
And in order to do this,
195
00:10:22,420 --> 00:10:25,710
we actually first need to give the container a height
196
00:10:26,590 --> 00:10:29,963
because otherwise there is not really anything to fill,
197
00:10:30,920 --> 00:10:32,040
right?
198
00:10:32,040 --> 00:10:33,970
So let me show that to you.
199
00:10:33,970 --> 00:10:36,260
And I will move that up here again,
200
00:10:36,260 --> 00:10:40,093
with the option or alt up key.
201
00:10:41,150 --> 00:10:42,230
Let's put that here
202
00:10:45,534 --> 00:10:48,800
and 'grid-template-rows'.
203
00:10:48,800 --> 00:10:52,020
And so as I was saying, if we just do this,
204
00:10:52,020 --> 00:10:54,580
because then there's no space to fill,
205
00:10:54,580 --> 00:10:57,510
but actually there is some space.
206
00:10:57,510 --> 00:11:00,810
So these rows are quite tall,
207
00:11:00,810 --> 00:11:03,770
but let me explain to you why that is happening.
208
00:11:03,770 --> 00:11:06,900
So just like before we have this one element,
209
00:11:06,900 --> 00:11:09,810
which is 150 pixels tall.
210
00:11:09,810 --> 00:11:10,780
Right?
211
00:11:10,780 --> 00:11:11,720
And so therefore,
212
00:11:11,720 --> 00:11:16,630
this entire row here will then be 150 pixels tall as well.
213
00:11:16,630 --> 00:11:18,737
And so therefore, that is then '1fr'.
214
00:11:20,750 --> 00:11:22,190
All right.
215
00:11:22,190 --> 00:11:25,100
So again, the height of this track,
216
00:11:25,100 --> 00:11:29,200
this row track here is defined by its tallest element,
217
00:11:29,200 --> 00:11:32,730
which is this one here with 150 pixels.
218
00:11:32,730 --> 00:11:37,500
And so therefore then the entire height of this row is '1fr'
219
00:11:37,500 --> 00:11:39,050
as we defined it here.
220
00:11:39,050 --> 00:11:42,930
And so then the second track gets the exact same height,
221
00:11:42,930 --> 00:11:47,130
because, well, that has also '1fr'.
222
00:11:47,130 --> 00:11:51,090
But let's then now actually remove this here.
223
00:11:51,090 --> 00:11:54,573
And so this was the result I was expecting in the beginning.
224
00:11:55,700 --> 00:11:56,970
Okay.
225
00:11:56,970 --> 00:11:59,800
So now these are still the same size
226
00:11:59,800 --> 00:12:01,300
because there are still '1fr'.
227
00:12:02,150 --> 00:12:04,870
But the size is now defined by this row
228
00:12:04,870 --> 00:12:07,110
because this here is the height
229
00:12:07,110 --> 00:12:10,113
that is necessary to create this row.
230
00:12:11,080 --> 00:12:12,290
But now, as I was saying,
231
00:12:12,290 --> 00:12:16,760
let's actually define a height for this container.
232
00:12:16,760 --> 00:12:19,403
So if we say like 600 pixels,
233
00:12:20,320 --> 00:12:22,983
then you see that it looks very different.
234
00:12:23,840 --> 00:12:26,160
Let's make it a bit smaller.
235
00:12:26,160 --> 00:12:27,870
And yeah.
236
00:12:27,870 --> 00:12:31,270
So by creating a height for this container,
237
00:12:31,270 --> 00:12:33,390
we added a lot of empty space,
238
00:12:33,390 --> 00:12:38,230
which could now be filled by these two fractional units.
239
00:12:38,230 --> 00:12:39,310
Right.
240
00:12:39,310 --> 00:12:40,580
And just like before,
241
00:12:40,580 --> 00:12:43,260
we could of course make this one taller,
242
00:12:43,260 --> 00:12:47,580
like double as tall by giving it double the fractions.
243
00:12:47,580 --> 00:12:50,720
Okay, let's put it back.
244
00:12:50,720 --> 00:12:55,720
And usually the fr unit is actually more helpful on columns.
245
00:12:56,930 --> 00:12:57,920
Okay.
246
00:12:57,920 --> 00:13:00,480
So in fact, in many situations,
247
00:13:00,480 --> 00:13:03,910
it's actually enough to only define columns
248
00:13:03,910 --> 00:13:07,560
and let the rows be filled automatically.
249
00:13:07,560 --> 00:13:10,180
Now just one final thing is that of course,
250
00:13:10,180 --> 00:13:13,563
the 'auto' keyword is also available for rows.
251
00:13:14,450 --> 00:13:16,740
So now this only takes the space it needs
252
00:13:16,740 --> 00:13:20,360
and all the remaining space is automatically filled up
253
00:13:20,360 --> 00:13:21,880
by this one here.
254
00:13:21,880 --> 00:13:23,800
So by just first row track,
255
00:13:23,800 --> 00:13:26,380
which has the fractional unit.
256
00:13:26,380 --> 00:13:27,600
All right.
257
00:13:27,600 --> 00:13:30,660
And with this, you actually already learned many
258
00:13:30,660 --> 00:13:35,050
of the most important fundamentals of CSS Grid.
259
00:13:35,050 --> 00:13:38,870
So with this, we can already create some pretty useful grids
260
00:13:38,870 --> 00:13:40,620
in the real world.
261
00:13:40,620 --> 00:13:43,740
However, let's actually take it one step further
262
00:13:43,740 --> 00:13:48,470
in the next lecture and learn how to actually manually place
263
00:13:48,470 --> 00:13:52,393
and span grid items inside of our grid container.
19020
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.