Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,380 --> 00:00:02,490
In this lecture,
2
00:00:02,490 --> 00:00:05,480
we will use many of the things that we just learned
3
00:00:05,480 --> 00:00:07,130
about CSS grid
4
00:00:07,130 --> 00:00:10,913
and use it in order to build our blog post layout.
5
00:00:12,300 --> 00:00:17,300
So we are done with this part. So let's go back here.
6
00:00:17,490 --> 00:00:21,290
So back, basically to this home URL,
7
00:00:21,290 --> 00:00:26,220
and so this is the layout that we built before with Flexbox,
8
00:00:26,220 --> 00:00:27,560
right?
9
00:00:27,560 --> 00:00:29,640
So let's give ourselves some space.
10
00:00:29,640 --> 00:00:31,380
So we actually see it.
11
00:00:31,380 --> 00:00:34,700
And so now, we want to reproduce the exact same thing
12
00:00:34,700 --> 00:00:38,333
one more time, but this time using CSS grid.
13
00:00:40,380 --> 00:00:43,213
So we no longer need this.
14
00:00:44,460 --> 00:00:45,293
Then down here,
15
00:00:45,293 --> 00:00:49,410
there is a lot of code that we wrote using Flexbox,
16
00:00:49,410 --> 00:00:52,980
and actually, many of this, we do want to keep.
17
00:00:52,980 --> 00:00:55,120
So we used Flexbox, for example,
18
00:00:55,120 --> 00:00:58,910
here on the author, here in the navigation,
19
00:00:58,910 --> 00:01:02,710
and also here, in these related posts.
20
00:01:02,710 --> 00:01:06,140
And so there, in these very small component layouts,
21
00:01:06,140 --> 00:01:09,820
basically, we want to keep using Flexbox.
22
00:01:09,820 --> 00:01:11,670
So, as I mentioned before,
23
00:01:11,670 --> 00:01:16,030
CSS grid works perfectly together with Flexbox.
24
00:01:16,030 --> 00:01:19,660
And so, again, for these small component layouts,
25
00:01:19,660 --> 00:01:21,580
we will keep using Flexbox
26
00:01:21,580 --> 00:01:24,410
if they are simply one-dimensional layouts
27
00:01:24,410 --> 00:01:26,490
like this clearly,
28
00:01:26,490 --> 00:01:28,080
and this one here,
29
00:01:28,080 --> 00:01:29,620
so it's just a row
30
00:01:29,620 --> 00:01:31,240
and here, the same,
31
00:01:31,240 --> 00:01:33,780
it is just like one row.
32
00:01:33,780 --> 00:01:35,450
And so that's one-dimensional
33
00:01:35,450 --> 00:01:37,840
and so Flexbox is perfect for that.
34
00:01:38,690 --> 00:01:39,930
Now, on the other hand,
35
00:01:39,930 --> 00:01:43,780
the overall page layout is clearly two-dimensional.
36
00:01:43,780 --> 00:01:47,270
And so for that, we can now use CSS grid.
37
00:01:47,270 --> 00:01:50,330
So looking at our page here, once again,
38
00:01:50,330 --> 00:01:53,560
what are the parts of our layout?
39
00:01:53,560 --> 00:01:57,840
Well, we start with the big overall header here.
40
00:01:57,840 --> 00:02:00,350
Then we have this article element,
41
00:02:00,350 --> 00:02:02,610
then there's a side element,
42
00:02:02,610 --> 00:02:06,090
which is on the right side of the article,
43
00:02:06,090 --> 00:02:09,281
and finally, on the bottom, we have this footer,
44
00:02:09,281 --> 00:02:13,323
which should go all the way from the left to the right side.
45
00:02:14,390 --> 00:02:19,100
So we will now use CSS grid to layout all of that.
46
00:02:19,100 --> 00:02:21,570
Now before, when we used Flexbox,
47
00:02:21,570 --> 00:02:25,260
we actually only used it on a new row element
48
00:02:25,260 --> 00:02:26,580
that we created here,
49
00:02:26,580 --> 00:02:31,320
which contains this article and this site, remember?
50
00:02:31,320 --> 00:02:34,470
So we created a div with a class of row
51
00:02:34,470 --> 00:02:36,690
and put these two elements in there,
52
00:02:36,690 --> 00:02:40,410
and then we used Flexbox to put them side by side.
53
00:02:40,410 --> 00:02:41,243
But now,
54
00:02:41,243 --> 00:02:45,070
since we can do a two-dimensional layout with CSS grid,
55
00:02:45,070 --> 00:02:46,840
we no longer need that.
56
00:02:46,840 --> 00:02:48,790
And so the first thing that we're going to do
57
00:02:48,790 --> 00:02:50,443
is to deactivate that.
58
00:02:53,030 --> 00:02:55,450
So let's deactivate, also,
59
00:02:55,450 --> 00:02:58,403
the code that we used for the Flexbox layout.
60
00:03:01,990 --> 00:03:05,200
So Flexbox layout is all this.
61
00:03:05,200 --> 00:03:07,013
So this code we no longer want,
62
00:03:08,940 --> 00:03:13,490
and actually we cannot have one comment inside of the other.
63
00:03:13,490 --> 00:03:16,073
So let's remove this one here.
64
00:03:17,180 --> 00:03:20,520
And now, as for the HTML,
65
00:03:20,520 --> 00:03:23,510
so this is the row element that I was talking about,
66
00:03:23,510 --> 00:03:24,743
which we no longer need.
67
00:03:25,620 --> 00:03:27,400
So let's comment it out,
68
00:03:27,400 --> 00:03:32,400
and here also, add a comment "only necessary for Flexbox",
69
00:03:35,330 --> 00:03:40,263
and then, down there, let's also take out the closing tag.
70
00:03:41,550 --> 00:03:45,173
So that, well, that's this one,
71
00:03:46,150 --> 00:03:47,930
so I'm not deleting them again
72
00:03:47,930 --> 00:03:49,790
to keep them here as a reference,
73
00:03:49,790 --> 00:03:51,790
but I'm just commenting them out
74
00:03:51,790 --> 00:03:56,620
using command or control-slash, all right.
75
00:03:56,620 --> 00:03:58,823
So let's inspect our markup here.
76
00:04:01,050 --> 00:04:05,550
And so now we're back to having the header here.
77
00:04:05,550 --> 00:04:10,210
So our main header, the article, the aside, and the footer,
78
00:04:10,210 --> 00:04:14,560
all of them being simply child elements of the container.
79
00:04:14,560 --> 00:04:18,970
And so this container is what will be our grid container.
80
00:04:18,970 --> 00:04:23,970
So, let's now start building or CSS grid layout.
81
00:04:27,580 --> 00:04:31,320
And let's start by selecting the relevant elements,
82
00:04:31,320 --> 00:04:33,490
which are the container.
83
00:04:33,490 --> 00:04:36,600
And once again, we already selected them before,
84
00:04:36,600 --> 00:04:40,940
but I will do that here again so that we have the layout,
85
00:04:40,940 --> 00:04:45,030
in this case, nicely separated from the rest of the styles.
86
00:04:45,030 --> 00:04:47,460
So usually, we do not do that, but here,
87
00:04:47,460 --> 00:04:49,320
since this is a learning project,
88
00:04:49,320 --> 00:04:51,570
it is a little bit different.
89
00:04:51,570 --> 00:04:54,210
And so we will do it the other way around.
90
00:04:54,210 --> 00:04:56,160
So having everything together
91
00:04:56,160 --> 00:04:59,320
once we build our next big project.
92
00:04:59,320 --> 00:05:00,203
Now, okay.
93
00:05:01,440 --> 00:05:02,510
But anyway,
94
00:05:02,510 --> 00:05:05,850
now we need the main header and this is not a class,
95
00:05:05,850 --> 00:05:07,163
but just the element.
96
00:05:08,430 --> 00:05:11,743
So then the article, then the aside,
97
00:05:12,940 --> 00:05:16,910
and finally the footer.
98
00:05:16,910 --> 00:05:18,773
And now, as I was saying,
99
00:05:19,750 --> 00:05:23,773
this container is what's going to be our grid container.
100
00:05:24,870 --> 00:05:25,930
Okay.
101
00:05:25,930 --> 00:05:27,310
But just with this,
102
00:05:27,310 --> 00:05:30,310
nothing is going to happen because, by default,
103
00:05:30,310 --> 00:05:35,310
CSS grid places its grid items into rows.
104
00:05:35,720 --> 00:05:38,420
So we now need to define our columns
105
00:05:38,420 --> 00:05:43,420
using grid template columns.
106
00:05:43,460 --> 00:05:46,600
So how many columns do we have?
107
00:05:46,600 --> 00:05:49,760
Well, it is just two, right?
108
00:05:49,760 --> 00:05:54,040
So one for the article and one for the aside.
109
00:05:54,040 --> 00:05:57,406
And do you remember the size of the aside?
110
00:05:57,406 --> 00:06:00,193
I think it was 300 pixels.
111
00:06:01,459 --> 00:06:03,610
Yes.
112
00:06:03,610 --> 00:06:05,860
So that's what we put here.
113
00:06:05,860 --> 00:06:08,420
So that is going to be the second column.
114
00:06:08,420 --> 00:06:10,210
And then, as a first column,
115
00:06:10,210 --> 00:06:13,590
let that simply be all the remaining space.
116
00:06:13,590 --> 00:06:15,050
And so for that, remember,
117
00:06:15,050 --> 00:06:20,050
we can use "1fr", or actually it could be any "fr" here
118
00:06:20,500 --> 00:06:22,950
because this is the only one,
119
00:06:22,950 --> 00:06:26,830
but, as a default, we simply use one fr.
120
00:06:26,830 --> 00:06:29,210
And so if we give it a save, now,
121
00:06:29,210 --> 00:06:31,753
then something must have changed already.
122
00:06:32,910 --> 00:06:35,763
And indeed, now it looks different.
123
00:06:37,150 --> 00:06:39,550
So this one here is the header.
124
00:06:39,550 --> 00:06:43,300
Then here we have the article
125
00:06:43,300 --> 00:06:45,400
and then, here, the aside, and the footer.
126
00:06:46,290 --> 00:06:49,520
So we do indeed have a grid with two columns,
127
00:06:49,520 --> 00:06:53,770
but our items are not exactly where we want them to be.
128
00:06:53,770 --> 00:06:54,920
Right.
129
00:06:54,920 --> 00:06:57,223
And so let's go ahead and fix that.
130
00:06:58,770 --> 00:07:03,770
So we want the main header to not simply be this one cell,
131
00:07:04,556 --> 00:07:05,810
right?
132
00:07:05,810 --> 00:07:07,750
So not just this one cell,
133
00:07:07,750 --> 00:07:12,110
but instead we want it to span all the way to the end.
134
00:07:12,110 --> 00:07:12,943
Right.
135
00:07:12,943 --> 00:07:15,640
So we want it to be in the first one
136
00:07:15,640 --> 00:07:17,603
and in the second cell, as well.
137
00:07:20,040 --> 00:07:24,010
So if we turn this on, you can see, of course,
138
00:07:24,010 --> 00:07:25,280
our two columns.
139
00:07:25,280 --> 00:07:29,480
And so, here, grid line one, two, and three.
140
00:07:29,480 --> 00:07:32,030
And so, to do what I just said,
141
00:07:32,030 --> 00:07:35,080
there are multiple ways of achieving it.
142
00:07:35,080 --> 00:07:36,060
So here,
143
00:07:36,060 --> 00:07:39,330
remember we can use the property "grid-column"
144
00:07:39,330 --> 00:07:41,733
to place this element where we want it.
145
00:07:42,980 --> 00:07:46,570
And then, we want it to start at one.
146
00:07:46,570 --> 00:07:49,527
And now we can use these grid lines here,
147
00:07:49,527 --> 00:07:54,350
or we can say "span 2", for example.
148
00:07:54,350 --> 00:07:55,613
And so that works.
149
00:07:56,780 --> 00:07:59,943
So that's already looking actually quite perfect.
150
00:08:01,360 --> 00:08:02,193
Now,
151
00:08:02,193 --> 00:08:04,960
another way in which we could have done this, remember,
152
00:08:04,960 --> 00:08:09,960
would have been one and then slash minus one.
153
00:08:10,490 --> 00:08:12,040
And then we wouldn't have,
154
00:08:12,040 --> 00:08:15,720
have to thought about how many columns we want to span.
155
00:08:15,720 --> 00:08:17,030
All we had to think about
156
00:08:17,030 --> 00:08:19,740
is that we want to go from the beginning
157
00:08:19,740 --> 00:08:20,890
all the way to the end.
158
00:08:21,830 --> 00:08:24,443
And so that's usually the way that we do it.
159
00:08:25,590 --> 00:08:27,770
Now the same thing for the footer,
160
00:08:27,770 --> 00:08:30,320
which is similar in that regard.
161
00:08:30,320 --> 00:08:32,340
Let's just give it some background color
162
00:08:32,340 --> 00:08:34,630
so we can nicely see it
163
00:08:35,779 --> 00:08:38,653
and the color doesn't matter for now.
164
00:08:40,140 --> 00:08:42,040
So we see that the footer
165
00:08:42,040 --> 00:08:45,110
is just like the header previously, of course,
166
00:08:45,110 --> 00:08:48,030
only in one grid cell by default,
167
00:08:48,030 --> 00:08:52,040
but we want it to go all the way here, to the right side.
168
00:08:52,040 --> 00:08:55,073
So we just do the exact same thing as before.
169
00:08:56,410 --> 00:09:00,540
So "grid-column" and one slash minus one
170
00:09:01,400 --> 00:09:03,550
and now,
171
00:09:03,550 --> 00:09:04,880
and so now, indeed,
172
00:09:04,880 --> 00:09:07,193
it stretches all the way to the end there,
173
00:09:08,510 --> 00:09:12,090
so, let's get rid of this.
174
00:09:12,090 --> 00:09:17,090
And actually, right now, it looks almost ready already,
175
00:09:17,710 --> 00:09:18,800
right?
176
00:09:18,800 --> 00:09:22,500
We are just missing this gap here, in the middle,
177
00:09:22,500 --> 00:09:26,493
which, remember, we used to be 75 pixels.
178
00:09:27,860 --> 00:09:31,023
So yeah, let's do that on the container.
179
00:09:31,980 --> 00:09:33,723
So that is the column gap.
180
00:09:35,720 --> 00:09:40,513
So "column-gap", 75 pixels
181
00:09:42,050 --> 00:09:45,220
and well,
182
00:09:45,220 --> 00:09:46,830
there we go.
183
00:09:46,830 --> 00:09:51,830
So the article is back to being 825 pixels wide,
184
00:09:52,060 --> 00:09:55,360
just as we specified it in the very beginning,
185
00:09:55,360 --> 00:09:58,600
in our very first float layout.
186
00:09:58,600 --> 00:09:59,520
Right.
187
00:09:59,520 --> 00:10:03,130
But now we don't have to specify any of this width
188
00:10:03,130 --> 00:10:05,980
because CSS grid simply figures that out
189
00:10:05,980 --> 00:10:07,743
automatically for us.
190
00:10:09,060 --> 00:10:12,350
Now the aside is of course also 300,
191
00:10:12,350 --> 00:10:14,530
and so everything together
192
00:10:14,530 --> 00:10:18,870
makes up our 1200 pixel container.
193
00:10:18,870 --> 00:10:20,020
Great.
194
00:10:20,020 --> 00:10:23,090
So this is basically almost ready,
195
00:10:23,090 --> 00:10:25,670
but we can actually do better.
196
00:10:25,670 --> 00:10:27,730
So usually what we want to do
197
00:10:27,730 --> 00:10:31,440
is to concentrate all the styles that are above the grid
198
00:10:31,440 --> 00:10:33,030
in the grid container,
199
00:10:33,030 --> 00:10:35,490
and that should include spacing.
200
00:10:35,490 --> 00:10:38,750
Now, we already did that for the horizontal space.
201
00:10:38,750 --> 00:10:43,530
So for this space, here, by using the column gap property,
202
00:10:43,530 --> 00:10:45,660
but the rest of the space here,
203
00:10:45,660 --> 00:10:50,640
so this vertical space actually comes from margins.
204
00:10:50,640 --> 00:10:53,010
So there's a margin right here.
205
00:10:53,010 --> 00:10:58,010
And there's also some margin, yeah, here on the article.
206
00:11:00,070 --> 00:11:01,010
So again,
207
00:11:01,010 --> 00:11:04,160
we should actually concentrate these spacings
208
00:11:04,160 --> 00:11:05,880
all on the grid container
209
00:11:05,880 --> 00:11:09,010
because that makes our code a lot easier to understand
210
00:11:09,010 --> 00:11:11,400
when we analyze it later.
211
00:11:11,400 --> 00:11:12,233
All right.
212
00:11:13,260 --> 00:11:14,460
So again,
213
00:11:14,460 --> 00:11:17,990
notice that this here has a margin bottom of 60
214
00:11:17,990 --> 00:11:19,873
and the same for the header.
215
00:11:21,170 --> 00:11:24,470
So this main header, yeah.
216
00:11:24,470 --> 00:11:28,520
Somewhere here, it says that the margin bottom is 60.
217
00:11:28,520 --> 00:11:31,233
And so let's remove all of that.
218
00:11:32,820 --> 00:11:36,193
So we want no margin bottom on the elements.
219
00:11:38,350 --> 00:11:41,200
And actually, let's not write that here,
220
00:11:41,200 --> 00:11:45,070
but let's really remove that extra margin
221
00:11:45,070 --> 00:11:47,980
because this layout with CSS grid
222
00:11:47,980 --> 00:11:50,363
will actually be our final layout.
223
00:11:52,410 --> 00:11:56,513
So let's look for those 60 pixels,
224
00:11:57,820 --> 00:11:59,903
and should be at the very top, I think.
225
00:12:01,960 --> 00:12:04,820
Yeah. So here we have it in the article.
226
00:12:04,820 --> 00:12:06,560
So let's comment that out
227
00:12:06,560 --> 00:12:09,520
and, here, in the main header as well.
228
00:12:09,520 --> 00:12:11,170
And so that is confusing,
229
00:12:11,170 --> 00:12:14,123
especially if the layout was a lot bigger.
230
00:12:15,800 --> 00:12:17,620
So the space has now gone,
231
00:12:17,620 --> 00:12:22,620
but we can easily bring it back with just one line of CSS,
232
00:12:22,810 --> 00:12:27,363
which is "row-gap" of 60 pixels.
233
00:12:28,400 --> 00:12:29,710
And there you go,
234
00:12:29,710 --> 00:12:32,810
now you have the space here and it's nicely visible
235
00:12:32,810 --> 00:12:35,630
also in this grid overlay.
236
00:12:35,630 --> 00:12:38,860
And so doing it like this is a lot cleaner
237
00:12:38,860 --> 00:12:43,130
and, yeah, really a lot better for maintaining your code
238
00:12:43,130 --> 00:12:44,193
in the long run.
239
00:12:45,180 --> 00:12:47,935
Okay. And now just to finish,
240
00:12:47,935 --> 00:12:51,243
this side element here
241
00:12:51,243 --> 00:12:54,693
is now back to stretching itself all the way to the bottom.
242
00:12:55,920 --> 00:12:58,360
So let's say that we don't want that
243
00:12:58,360 --> 00:13:02,170
and that we want this element only here, at the top.
244
00:13:02,170 --> 00:13:04,640
So how do we do that?
245
00:13:04,640 --> 00:13:05,900
So basically,
246
00:13:05,900 --> 00:13:10,804
how do we rearrange this element inside of the grid cell?
247
00:13:10,804 --> 00:13:15,650
Well, for that we use one of the items property,
248
00:13:15,650 --> 00:13:20,180
so "justify-items" or "align-items", right?
249
00:13:20,180 --> 00:13:21,810
Remember that?
250
00:13:21,810 --> 00:13:26,477
So in the case of vertical space, we use "align-items",
251
00:13:27,780 --> 00:13:28,613
right?
252
00:13:29,580 --> 00:13:33,150
So again, let's come to our grid container.
253
00:13:33,150 --> 00:13:35,390
And, in case that this is confusing,
254
00:13:35,390 --> 00:13:38,940
you can just review the last lecture, I think,
255
00:13:38,940 --> 00:13:40,700
or also the cheat sheet
256
00:13:40,700 --> 00:13:43,803
where I have listed all the CSS grid properties.
257
00:13:45,140 --> 00:13:48,630
So "align-items" is, remember,
258
00:13:48,630 --> 00:13:51,750
used to align the grid element
259
00:13:51,750 --> 00:13:55,430
so the grid item inside of itself.
260
00:13:55,430 --> 00:13:56,620
So for example,
261
00:13:56,620 --> 00:14:01,620
remember one of the popular options is to set it to center
262
00:14:01,850 --> 00:14:03,887
and here it's actually "align-items",
263
00:14:05,050 --> 00:14:08,713
and so now, this one here moved to the center,
264
00:14:09,950 --> 00:14:11,200
now right?
265
00:14:11,200 --> 00:14:14,490
And this first one here didn't change anything
266
00:14:14,490 --> 00:14:15,940
because this element
267
00:14:15,940 --> 00:14:20,330
is actually the one that dictates the size of this row.
268
00:14:20,330 --> 00:14:21,520
Right.
269
00:14:21,520 --> 00:14:22,800
So if you notice,
270
00:14:22,800 --> 00:14:27,800
we actually did not define any grid template rows, right?
271
00:14:28,330 --> 00:14:29,210
So basically,
272
00:14:29,210 --> 00:14:33,180
we are simply allowing CSS grid to adjust the rows
273
00:14:33,180 --> 00:14:34,930
to its content.
274
00:14:34,930 --> 00:14:35,763
Okay.
275
00:14:35,763 --> 00:14:38,380
And so that's why I actually said earlier
276
00:14:38,380 --> 00:14:41,520
that it's pretty common to only define columns
277
00:14:41,520 --> 00:14:42,890
and not rows
278
00:14:42,890 --> 00:14:46,350
because many times the rows are simply defined
279
00:14:46,350 --> 00:14:48,563
by whatever content they contain.
280
00:14:49,540 --> 00:14:53,410
So again, in this case, it is this piece of content here,
281
00:14:53,410 --> 00:14:56,620
which dictates the size of this entire row.
282
00:14:56,620 --> 00:14:59,820
And so if we centered the grid items, then vertically,
283
00:14:59,820 --> 00:15:03,083
of course, this one here is not going to move anywhere,
284
00:15:04,050 --> 00:15:05,430
but this one is.
285
00:15:05,430 --> 00:15:08,290
And so, let's now push it to the start
286
00:15:09,260 --> 00:15:11,950
and remember that it's just "start"
287
00:15:11,950 --> 00:15:14,963
not "flex start" like it is in Flexbox.
288
00:15:16,890 --> 00:15:17,723
Okay.
289
00:15:17,723 --> 00:15:19,250
There you go.
290
00:15:19,250 --> 00:15:21,593
And actually that's it.
291
00:15:22,580 --> 00:15:27,040
So this is the third way of building the exact same layout.
292
00:15:27,040 --> 00:15:28,620
And if you ask me,
293
00:15:28,620 --> 00:15:32,870
this is actually the very best way of doing so,
294
00:15:32,870 --> 00:15:33,703
but now,
295
00:15:33,703 --> 00:15:36,760
I'm pretty sure that you need to practice these skills
296
00:15:36,760 --> 00:15:38,040
a little bit more.
297
00:15:38,040 --> 00:15:41,250
And so you can do that right in the next lecture,
298
00:15:41,250 --> 00:15:44,223
in the final coding challenge of this section.
21043
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.