Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,430 --> 00:00:04,900
Now, just like in Flexbox and CSS grid,
2
00:00:04,900 --> 00:00:09,270
we also have the ability of aligning grid items.
3
00:00:09,270 --> 00:00:11,693
And so let's now learn how that works.
4
00:00:13,230 --> 00:00:17,170
And now let's actually work on this other grid here.
5
00:00:17,170 --> 00:00:19,490
So there's container two.
6
00:00:19,490 --> 00:00:23,500
So I'm removing display none from this one.
7
00:00:23,500 --> 00:00:25,233
And actually let's put it here.
8
00:00:27,980 --> 00:00:32,010
Okay, now this didn't have any effect because later here
9
00:00:32,010 --> 00:00:36,173
we overwrite display with the grid value, right.
10
00:00:38,180 --> 00:00:41,880
So not here, but let's put it here at the end.
11
00:00:41,880 --> 00:00:43,803
Let's say this is only temporary,
12
00:00:44,680 --> 00:00:48,863
because of course you will want to take a look at it later.
13
00:00:50,490 --> 00:00:54,550
So this is or other grid container.
14
00:00:54,550 --> 00:00:58,640
So number two, let's just make it a little bit smaller.
15
00:00:58,640 --> 00:01:03,363
Let's say just 700 pixels and a margin of 40.
16
00:01:04,940 --> 00:01:08,910
And so that fits or page here a little bit better.
17
00:01:08,910 --> 00:01:11,453
Let's quickly also create a grid,
18
00:01:12,385 --> 00:01:14,830
but this we can practice a little bit.
19
00:01:14,830 --> 00:01:19,830
So remember a grid container needs display, set to grid.
20
00:01:21,820 --> 00:01:24,840
Then here we have six elements.
21
00:01:24,840 --> 00:01:27,800
For some reason, we don't have number two,
22
00:01:27,800 --> 00:01:30,110
but well, that doesn't matter.
23
00:01:30,110 --> 00:01:31,600
So we have six elements.
24
00:01:31,600 --> 00:01:34,260
So let's create a grid three by two.
25
00:01:34,260 --> 00:01:36,423
So three columns, two rows.
26
00:01:40,260 --> 00:01:42,120
So grid template columns,
27
00:01:42,120 --> 00:01:46,343
and let's make the first one under 25 pixels,
28
00:01:48,260 --> 00:01:51,460
200 and then another smaller one.
29
00:01:51,460 --> 00:01:53,364
And here I'm not using Fr units
30
00:01:53,364 --> 00:01:58,290
because I'm not really trying to make a real world grid.
31
00:01:58,290 --> 00:02:02,370
So this is just for demonstration purposes anyway,
32
00:02:02,370 --> 00:02:04,423
so we can just use fixed width.
33
00:02:05,330 --> 00:02:08,937
So template rows and here 250,
34
00:02:11,670 --> 00:02:15,600
let's say, and 100 pixels.
35
00:02:15,600 --> 00:02:17,833
Okay, so that is our grid.
36
00:02:18,900 --> 00:02:20,900
All right, once again,
37
00:02:20,900 --> 00:02:25,210
this number three here has the height of 150 pixels
38
00:02:25,210 --> 00:02:26,850
and therefore it doesn't fill up
39
00:02:26,850 --> 00:02:31,570
the entire track height of 250 pixels.
40
00:02:31,570 --> 00:02:33,860
That's why we have this black color here,
41
00:02:33,860 --> 00:02:37,020
which is the background of this container.
42
00:02:37,020 --> 00:02:40,100
And you see that there is also a lot of empty space here
43
00:02:40,100 --> 00:02:41,660
around this grid.
44
00:02:41,660 --> 00:02:44,660
And so this is what we will now talk about.
45
00:02:44,660 --> 00:02:48,040
So aligning grid items is a little bit different
46
00:02:48,040 --> 00:02:50,000
than it is in Flexbox
47
00:02:50,000 --> 00:02:54,523
because we can align both the tracks inside the container.
48
00:02:54,523 --> 00:02:59,523
And we can also align the grid items inside of the tracks.
49
00:03:00,150 --> 00:03:02,490
And that's because sometimes the grid items
50
00:03:02,490 --> 00:03:05,810
are smaller than the cells that they are in.
51
00:03:05,810 --> 00:03:08,750
But let's now start with aligning the grid tracks
52
00:03:08,750 --> 00:03:11,340
inside of the grid container.
53
00:03:11,340 --> 00:03:13,990
So basically the columns and the rows
54
00:03:13,990 --> 00:03:16,050
inside the grid container.
55
00:03:16,050 --> 00:03:18,080
And that's only possible in this case
56
00:03:18,080 --> 00:03:20,170
because the grid itself...
57
00:03:20,170 --> 00:03:23,970
So this one here is smaller than the grid container.
58
00:03:23,970 --> 00:03:27,480
So as I mentioned, there's a lot of empty space here.
59
00:03:27,480 --> 00:03:30,710
And so there is some space to align all tracks
60
00:03:30,710 --> 00:03:32,273
inside of the container.
61
00:03:33,590 --> 00:03:36,300
So let's write that here as a comment,
62
00:03:36,300 --> 00:03:41,300
aligning tracks inside container.
63
00:03:43,220 --> 00:03:47,261
And so these are basically about distributing empty space,
64
00:03:47,261 --> 00:03:51,253
so empty space,
65
00:03:52,940 --> 00:03:55,740
just so you get to see here as a very important comment.
66
00:03:57,110 --> 00:03:59,770
So that's distribute here.
67
00:03:59,770 --> 00:04:01,930
And so the properties we use for that,
68
00:04:01,930 --> 00:04:05,610
are justified content and aligned content.
69
00:04:05,610 --> 00:04:08,990
So it's these two properties that end in content,
70
00:04:08,990 --> 00:04:12,610
which are for aligning tracks inside the container.
71
00:04:12,610 --> 00:04:16,950
And let's start with actually justify content,
72
00:04:16,950 --> 00:04:20,090
which you might notice is exactly the same
73
00:04:20,090 --> 00:04:24,483
as it is in Flexbox, and it does do the same thing.
74
00:04:25,330 --> 00:04:27,090
So if we set this to center,
75
00:04:27,090 --> 00:04:29,980
then this will align the entire tracks
76
00:04:29,980 --> 00:04:32,451
inside of the container.
77
00:04:32,451 --> 00:04:36,100
So you see that's exactly what happened.
78
00:04:36,100 --> 00:04:39,950
And it is also the same thing that happens in Flexbox.
79
00:04:39,950 --> 00:04:44,840
So this property here might already be clear to you.
80
00:04:44,840 --> 00:04:49,030
Now we can also do like the other values.
81
00:04:49,030 --> 00:04:53,180
So we can also say a space between, for example,
82
00:04:53,180 --> 00:04:55,020
which might be helpful.
83
00:04:55,020 --> 00:04:57,050
And so just like in Flexbox,
84
00:04:57,050 --> 00:05:00,500
maybe you expected this result where we distributed
85
00:05:00,500 --> 00:05:02,910
the empty space here evenly
86
00:05:02,910 --> 00:05:07,520
between all of these three tracks, all right,
87
00:05:07,520 --> 00:05:10,220
but let's turn this one off
88
00:05:10,220 --> 00:05:12,870
and leave it at the center like this.
89
00:05:12,870 --> 00:05:15,750
And so we can align them horizontally
90
00:05:15,750 --> 00:05:17,760
inside of the container,
91
00:05:17,760 --> 00:05:21,210
but of course we can also align the tracks vertically.
92
00:05:21,210 --> 00:05:25,430
And so for that, we have align, but now it's not items
93
00:05:25,430 --> 00:05:28,820
but content, so aligned content,
94
00:05:28,820 --> 00:05:31,840
which is a new one and here
95
00:05:31,840 --> 00:05:36,840
let's again use center for example, and there we go.
96
00:05:37,080 --> 00:05:40,000
So with this, the entire grid is now centered
97
00:05:40,000 --> 00:05:42,630
inside of the grid container.
98
00:05:42,630 --> 00:05:46,513
We can, of course also give ourselves some gap here.
99
00:05:48,020 --> 00:05:49,163
Let's say 50,
100
00:05:50,000 --> 00:05:53,500
and this may be demonstrated even a bit better.
101
00:05:53,500 --> 00:05:56,449
And of course there would also be
102
00:05:56,449 --> 00:06:00,090
space between, like this.
103
00:06:00,090 --> 00:06:04,160
So it would push each of the tracks to one of the extremes.
104
00:06:04,160 --> 00:06:07,423
So the first one to the top, the other one to the end,
105
00:06:08,890 --> 00:06:13,890
and then there's also things like start or end.
106
00:06:14,270 --> 00:06:18,060
And these are actually different from Flexbox.
107
00:06:18,060 --> 00:06:20,260
So you see here actually this suggestion,
108
00:06:20,260 --> 00:06:25,260
which says flex end, but this one only works on Flexbox.
109
00:06:25,400 --> 00:06:27,950
So this is a bit confusing and I'm not sure
110
00:06:27,950 --> 00:06:31,339
why they did it like this, but well,
111
00:06:31,339 --> 00:06:34,900
in CSS grid it's called end and start,
112
00:06:34,900 --> 00:06:39,083
while in Flexbox it is called flex end and flex start.
113
00:06:40,370 --> 00:06:41,620
All right.
114
00:06:41,620 --> 00:06:45,143
So again, start, but let's put it at the center.
115
00:06:46,010 --> 00:06:48,410
So centering things in CSS
116
00:06:48,410 --> 00:06:52,030
is something that we usually like to do a lot.
117
00:06:52,030 --> 00:06:52,863
Okay.
118
00:06:52,863 --> 00:06:57,294
And that's it about aligning tracks inside of the container.
119
00:06:57,294 --> 00:06:59,896
And once again, this only makes sense
120
00:06:59,896 --> 00:07:03,032
because the grid container is actually bigger
121
00:07:03,032 --> 00:07:04,543
than the grid itself.
122
00:07:05,580 --> 00:07:07,496
So the grid itself is only
123
00:07:07,496 --> 00:07:12,130
the some of these width of columns plus the gap,
124
00:07:12,130 --> 00:07:14,483
but then the container has this higher width.
125
00:07:15,690 --> 00:07:20,690
Okay. And so now let's move on to aligning the tracts.
126
00:07:24,500 --> 00:07:29,313
We're actually aligning the items inside cells.
127
00:07:32,030 --> 00:07:34,910
And so we can also say that this properties
128
00:07:34,910 --> 00:07:39,910
are about moving items around inside the cells.
129
00:07:43,315 --> 00:07:47,000
And let's start with align items.
130
00:07:47,000 --> 00:07:51,310
And this one you already remember from Flexbox, right.
131
00:07:51,310 --> 00:07:53,560
So what do you think is going to happen
132
00:07:53,560 --> 00:07:55,580
when we also set this one to center
133
00:07:56,550 --> 00:07:59,520
and keep in mind that this is about aligning items
134
00:07:59,520 --> 00:08:01,720
inside of the cells.
135
00:08:01,720 --> 00:08:04,740
So right now the cell is this entire thing here,
136
00:08:04,740 --> 00:08:08,230
which has this background color. So, which is visible.
137
00:08:08,230 --> 00:08:10,720
And that's basically because by default
138
00:08:10,720 --> 00:08:15,720
align items is set to stretch. So just like in Flexbox.
139
00:08:16,213 --> 00:08:17,700
Okay.
140
00:08:17,700 --> 00:08:21,330
So again, all of this year is the cell,
141
00:08:21,330 --> 00:08:25,550
but now we will move the items around inside of the cells.
142
00:08:25,550 --> 00:08:28,813
So if we set this to center, then let's see,
143
00:08:29,710 --> 00:08:31,950
and there you go.
144
00:08:31,950 --> 00:08:35,100
So now the grid items are centered vertically
145
00:08:35,100 --> 00:08:38,123
because that is what align is always all about.
146
00:08:39,470 --> 00:08:40,440
Right.
147
00:08:40,440 --> 00:08:43,920
And we can, of course also do the same thing horizontally.
148
00:08:43,920 --> 00:08:46,313
And so for that is always justify.
149
00:08:47,430 --> 00:08:52,430
Justify items and if we set that to center as well,
150
00:08:53,086 --> 00:08:56,380
then we should always see a tiny square
151
00:08:56,380 --> 00:08:59,573
around the content, but everything centered.
152
00:09:00,510 --> 00:09:03,690
Right. And here, that's the result.
153
00:09:03,690 --> 00:09:07,250
And this will be even better to see once we turn on
154
00:09:07,250 --> 00:09:12,250
the grid visualization, so like this, and so,
155
00:09:15,680 --> 00:09:18,440
somehow it disappears, but anyway,
156
00:09:18,440 --> 00:09:20,950
so here you have the cells and then you see
157
00:09:20,950 --> 00:09:24,310
that the items are in fact now aligned vertically
158
00:09:24,310 --> 00:09:26,633
and horizontally in the center.
159
00:09:30,570 --> 00:09:33,533
So let's experiment a little bit more here,
160
00:09:34,630 --> 00:09:35,900
and I'm doing it here now
161
00:09:35,900 --> 00:09:39,003
so that the overlay here doesn't disappear.
162
00:09:40,490 --> 00:09:44,893
So align items is by default, as I mentioned stretch.
163
00:09:47,180 --> 00:09:49,833
Right, and so that would look like this.
164
00:09:52,980 --> 00:09:55,610
but we just cell it to center.
165
00:09:55,610 --> 00:10:00,110
Right. But then as always, there is also a start,
166
00:10:00,110 --> 00:10:04,100
which put them at the start and there is end.
167
00:10:04,100 --> 00:10:08,350
And again, it is just end without deflects.
168
00:10:08,350 --> 00:10:09,980
All right.
169
00:10:09,980 --> 00:10:13,460
And of course we can try the same with justify items,
170
00:10:13,460 --> 00:10:16,233
which also by default is stretch.
171
00:10:17,870 --> 00:10:21,560
So just like this stretching all the way from left to right,
172
00:10:21,560 --> 00:10:24,460
because justify is horizontally.
173
00:10:24,460 --> 00:10:27,390
So it's across the row axis.
174
00:10:27,390 --> 00:10:30,380
And here we could say end as well,
175
00:10:30,380 --> 00:10:33,880
which would put the elements into this very corner
176
00:10:33,880 --> 00:10:37,270
of the cell. Right.
177
00:10:37,270 --> 00:10:41,303
But let's actually keep them here in the center like this.
178
00:10:45,070 --> 00:10:48,781
So to recap the content properties.
179
00:10:48,781 --> 00:10:52,170
So these two properties that end in content,
180
00:10:52,170 --> 00:10:56,470
they are about aligning tracks inside of the container.
181
00:10:56,470 --> 00:11:00,080
Okay. And then justify is horizontally,
182
00:11:00,080 --> 00:11:04,690
so on the row access, y align is vertically.
183
00:11:04,690 --> 00:11:08,490
So on the column axis and the same is true down here
184
00:11:08,490 --> 00:11:12,220
for aligning the items inside of the cells.
185
00:11:12,220 --> 00:11:15,310
But then these two are called items.
186
00:11:15,310 --> 00:11:19,252
So it is both align and justify the items.
187
00:11:19,252 --> 00:11:20,941
Okay.
188
00:11:20,941 --> 00:11:24,130
And now finally, remember how in flexbox
189
00:11:24,130 --> 00:11:27,170
we could overwrite these individually.
190
00:11:27,170 --> 00:11:30,630
So let's do the same here and select, for example,
191
00:11:30,630 --> 00:11:32,340
element number three,
192
00:11:32,340 --> 00:11:35,353
which is this one that has the special height.
193
00:11:36,940 --> 00:11:40,790
And so just like in flexbox, we have align self,
194
00:11:40,790 --> 00:11:43,720
which will then overwrite the align items property
195
00:11:43,720 --> 00:11:45,670
that we have up here.
196
00:11:45,670 --> 00:11:50,523
So it's in the center, let's put it at the end, for example.
197
00:11:52,050 --> 00:11:55,700
So just like this and in CSS grid,
198
00:11:55,700 --> 00:11:58,820
we can then also overwrite the justify items.
199
00:11:58,820 --> 00:12:03,820
So horizontally, so justify self and then let's say end,
200
00:12:06,220 --> 00:12:09,850
again, just to put it there in the corner.
201
00:12:09,850 --> 00:12:10,683
Okay.
202
00:12:10,683 --> 00:12:12,930
And this is actually a very good way
203
00:12:12,930 --> 00:12:16,313
of centering individual items in CSS grid.
204
00:12:17,940 --> 00:12:18,773
So for example,
205
00:12:18,773 --> 00:12:22,193
let's say that these two would actually be in the end.
206
00:12:23,180 --> 00:12:25,810
So all of them would be in the bottom right corner
207
00:12:25,810 --> 00:12:29,283
of the cell, but then we wanted to center one of them.
208
00:12:30,160 --> 00:12:34,683
So set this one to center and there you go,
209
00:12:35,610 --> 00:12:37,960
all right, great.
210
00:12:37,960 --> 00:12:42,550
With this, we wrap up this introduction to CSS grid,
211
00:12:42,550 --> 00:12:45,501
which I hope was not all too confusing,
212
00:12:45,501 --> 00:12:49,040
even though I know it was a lot to take in.
213
00:12:49,040 --> 00:12:52,040
But as always, there is no need to memorize
214
00:12:52,040 --> 00:12:53,830
all of this for now.
215
00:12:53,830 --> 00:12:57,130
What I want you to take away from these last few lectures,
216
00:12:57,130 --> 00:13:00,890
was that you now know how CSS grid actually works
217
00:13:00,890 --> 00:13:04,270
in broad terms, because if you know that,
218
00:13:04,270 --> 00:13:06,520
then it will be very easy to simply go
219
00:13:06,520 --> 00:13:09,370
and look up the exact properties that you need.
220
00:13:09,370 --> 00:13:12,860
For example, in the cheat sheet that I gave you
221
00:13:12,860 --> 00:13:14,680
in the theory lecture.
222
00:13:14,680 --> 00:13:17,380
So the one that you hopefully printed out
223
00:13:17,380 --> 00:13:22,030
and have somewhere on your desk, like I actually do, nice.
224
00:13:22,030 --> 00:13:25,410
So that's great, great progress.
225
00:13:25,410 --> 00:13:29,420
Very good to still see you here. And now in the next video,
226
00:13:29,420 --> 00:13:31,233
we will apply our knowledge
227
00:13:31,233 --> 00:13:34,580
to the page that we have been building.
228
00:13:34,580 --> 00:13:39,580
So basically we will now build or layout using CSS grid.
229
00:13:39,854 --> 00:13:42,510
So I'm very excited for that one.
230
00:13:42,510 --> 00:13:44,283
And I hope that you are too.
17336
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.