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:03,120
So I hope you're excited
2
00:00:03,120 --> 00:00:06,540
to start learning about CSS Grid.
3
00:00:06,540 --> 00:00:10,070
I am for sure and I actually can't wait
4
00:00:10,070 --> 00:00:12,663
to finally show you CSS Grid.
5
00:00:14,660 --> 00:00:17,130
And to start learning CSS Grid,
6
00:00:17,130 --> 00:00:22,130
the best thing is to once again, do that in isolation.
7
00:00:22,270 --> 00:00:25,210
So just like we did here with flexbox,
8
00:00:25,210 --> 00:00:27,050
which we no longer need,
9
00:00:27,050 --> 00:00:31,220
we also have a starter file for CSS Grid.
10
00:00:31,220 --> 00:00:34,040
So this HTML file right here
11
00:00:34,040 --> 00:00:39,040
is what we will start using to learn CSS Grid now.
12
00:00:39,110 --> 00:00:43,490
And again, we already connected that file here
13
00:00:43,490 --> 00:00:46,700
in our navigation of our main page.
14
00:00:46,700 --> 00:00:49,503
So here we have cssgrid.html.
15
00:00:50,560 --> 00:00:54,460
So if we go here to our page and click that,
16
00:00:54,460 --> 00:00:56,803
then here is our starter file.
17
00:00:58,350 --> 00:01:03,350
So you see actually we have two container elements here,
18
00:01:03,690 --> 00:01:06,523
so let me show that to you.
19
00:01:07,480 --> 00:01:11,750
Yeah, so we have container one and container two.
20
00:01:11,750 --> 00:01:13,930
And the first one is this one here
21
00:01:13,930 --> 00:01:18,400
so basically with the same eight HTML elements
22
00:01:18,400 --> 00:01:19,523
that we had before.
23
00:01:21,110 --> 00:01:24,740
Okay, so don't worry about this one here for now
24
00:01:24,740 --> 00:01:28,930
let's actually turn this one off for now
25
00:01:28,930 --> 00:01:32,150
and to do that, we can do something
26
00:01:32,150 --> 00:01:34,370
that we haven't done before.
27
00:01:34,370 --> 00:01:35,970
So let me show you something new
28
00:01:36,940 --> 00:01:41,823
and that is display and we can set it to none.
29
00:01:42,670 --> 00:01:44,520
And with this, it will simply
30
00:01:44,520 --> 00:01:48,673
be completely removed from the page, all right?
31
00:01:49,820 --> 00:01:54,220
But anyway, let's now get started with CSS Grid here
32
00:01:54,220 --> 00:01:56,270
in this container one.
33
00:01:56,270 --> 00:02:00,420
So CSS Grid is right now the most modern way
34
00:02:00,420 --> 00:02:04,610
of building layouts and it's also the most complete one
35
00:02:04,610 --> 00:02:08,060
and in my opinion is even the easiest way
36
00:02:08,060 --> 00:02:11,300
of building layouts at least if you use
37
00:02:11,300 --> 00:02:13,270
only the fundamentals.
38
00:02:13,270 --> 00:02:17,300
And setting up a simple grid takes less than a minute
39
00:02:17,300 --> 00:02:19,990
so let's quickly do that.
40
00:02:19,990 --> 00:02:22,060
Now, just like in flexbox
41
00:02:22,060 --> 00:02:25,600
we have flex containers and flex items.
42
00:02:25,600 --> 00:02:30,600
In CSS Grid, we have a grid container and then grid items.
43
00:02:31,650 --> 00:02:36,250
So it's very similar logic and so our a grid container
44
00:02:36,250 --> 00:02:39,290
is of course going to be this one here.
45
00:02:39,290 --> 00:02:42,750
And so in order to declare that here in our code,
46
00:02:42,750 --> 00:02:46,490
we can write display and now it's not flex,
47
00:02:46,490 --> 00:02:50,210
but grid, all right?
48
00:02:50,210 --> 00:02:52,200
And that's actually it,
49
00:02:52,200 --> 00:02:55,340
so visually this changes nothing in this case
50
00:02:55,340 --> 00:02:57,780
because now we need to actually define
51
00:02:57,780 --> 00:03:00,030
our two dimensional layout.
52
00:03:00,030 --> 00:03:02,993
So basically, our columns and our rows.
53
00:03:04,670 --> 00:03:06,363
So let's do that.
54
00:03:08,260 --> 00:03:13,260
So we use the property called grid template columns,
55
00:03:17,170 --> 00:03:21,740
and now here we can define as many width values as we want.
56
00:03:21,740 --> 00:03:23,590
And then for each of these values,
57
00:03:23,590 --> 00:03:26,230
one column will be created.
58
00:03:26,230 --> 00:03:30,830
So let's say we write 250 pixels and 150 pixels.
59
00:03:32,970 --> 00:03:35,190
So just these two values.
60
00:03:35,190 --> 00:03:38,520
And so this code will generate two columns,
61
00:03:38,520 --> 00:03:41,760
one with a width of 250 pixels
62
00:03:41,760 --> 00:03:45,890
and another one with a width of 150.
63
00:03:45,890 --> 00:03:50,890
So let's save this and indeed, there we go.
64
00:03:52,120 --> 00:03:54,980
So we have indeed now two columns
65
00:03:54,980 --> 00:03:58,160
and if we inspect this we can see of course
66
00:03:58,160 --> 00:04:02,333
that the width are just what we specified there.
67
00:04:03,670 --> 00:04:05,623
It needs some more space here.
68
00:04:06,720 --> 00:04:11,157
So indeed this one has 150 and this one has 250.
69
00:04:13,210 --> 00:04:17,150
And in CSS Grid, if we turn on this visualization,
70
00:04:17,150 --> 00:04:20,060
we can actually see a lot of different stuff,
71
00:04:20,060 --> 00:04:22,053
but more about that later.
72
00:04:23,020 --> 00:04:26,170
So as soon as we start creating some columns,
73
00:04:26,170 --> 00:04:30,640
then all the elements will be displayed in columns and rows.
74
00:04:30,640 --> 00:04:35,210
And so as many rows will be created as necessary.
75
00:04:35,210 --> 00:04:39,120
So let's add some more columns here, why not?
76
00:04:39,120 --> 00:04:42,570
So let's say that we wanted a four by two grid,
77
00:04:42,570 --> 00:04:45,493
so a grid with four columns and two lines.
78
00:04:46,500 --> 00:04:49,313
So lets add another one here,
79
00:04:50,470 --> 00:04:55,060
and then another one let's say this one has only 150
80
00:04:56,520 --> 00:04:59,823
and well now there's not enough space.
81
00:05:00,830 --> 00:05:05,700
So let's just like before remove this one here a little bit,
82
00:05:05,700 --> 00:05:09,203
and then maybe we can change this to just 200.
83
00:05:11,620 --> 00:05:12,513
Let's see,
84
00:05:14,480 --> 00:05:17,340
let's decrease this a little bit more
85
00:05:17,340 --> 00:05:20,530
and maybe this can be just 100
86
00:05:20,530 --> 00:05:24,723
and so then this makes everything a bit easier to see.
87
00:05:25,570 --> 00:05:28,690
But anyway, what's important to understand here
88
00:05:28,690 --> 00:05:30,670
is that these grid items
89
00:05:30,670 --> 00:05:33,290
will now placed in these four columns
90
00:05:33,290 --> 00:05:35,740
and then as many rows as necessary
91
00:05:35,740 --> 00:05:39,890
are created to accommodate for all the content.
92
00:05:39,890 --> 00:05:42,173
So if we had another element here,
93
00:05:45,290 --> 00:05:48,940
let's say like this,
94
00:05:48,940 --> 00:05:51,610
then of course a new row would be created
95
00:05:51,610 --> 00:05:54,320
and the new item would be placed there
96
00:05:54,320 --> 00:05:57,003
and the rest here would simply be left empty.
97
00:05:58,820 --> 00:06:03,040
But for now, just for this demo, let's leave it like this.
98
00:06:03,040 --> 00:06:06,000
And let's notice something else here,
99
00:06:06,000 --> 00:06:09,320
which is that just like in flexbox
100
00:06:09,320 --> 00:06:13,030
the elements stretch across the entire cell.
101
00:06:13,030 --> 00:06:16,543
So basically across the height and the width
102
00:06:16,543 --> 00:06:19,200
that we defined for each cell.
103
00:06:19,200 --> 00:06:21,810
So each of these areas here between
104
00:06:21,810 --> 00:06:24,010
the columns and the rows.
105
00:06:24,010 --> 00:06:25,630
And a bit more about these terms
106
00:06:25,630 --> 00:06:27,750
actually in the next lecture.
107
00:06:27,750 --> 00:06:32,530
But what I was saying is that since this element here
108
00:06:32,530 --> 00:06:36,420
has a height of 150, so this green one,
109
00:06:36,420 --> 00:06:39,620
then this entire row will have that height.
110
00:06:39,620 --> 00:06:42,900
So in order to accommodate for that height,
111
00:06:42,900 --> 00:06:45,500
and all of these elements will then stretch
112
00:06:45,500 --> 00:06:50,240
as far as they need to basically fill that entire row.
113
00:06:50,240 --> 00:06:53,170
So if this did not exist,
114
00:06:53,170 --> 00:06:57,450
then the row would simply be the height of this content,
115
00:06:57,450 --> 00:07:00,510
which is the reason why this row is in fact
116
00:07:00,510 --> 00:07:05,510
only as tall as this cell here, so as this grid item, okay?
117
00:07:07,930 --> 00:07:10,930
So that is at least the default behavior,
118
00:07:10,930 --> 00:07:13,860
but of course we can also size these rows
119
00:07:13,860 --> 00:07:16,780
to make them as tall as we want.
120
00:07:16,780 --> 00:07:19,010
So we can size the columns like this
121
00:07:20,060 --> 00:07:22,913
and so of course we can also size the rows.
122
00:07:24,420 --> 00:07:29,420
So grid template and then as you might have guessed rows,
123
00:07:31,990 --> 00:07:36,060
and let's say we wanted the first one to be 300 pixels tall
124
00:07:37,160 --> 00:07:40,350
and the second 200 pixel.
125
00:07:40,350 --> 00:07:43,620
So the idea is the same as with the columns.
126
00:07:43,620 --> 00:07:46,670
So the first row will get this one,
127
00:07:46,670 --> 00:07:49,373
the second one will get this height,
128
00:07:50,380 --> 00:07:54,113
and so if we save this, this is what it looks like.
129
00:07:55,140 --> 00:07:57,510
And now this grid item here,
130
00:07:57,510 --> 00:08:00,670
which has that defined height of 150,
131
00:08:00,670 --> 00:08:04,530
does not stretch across this entire cell here
132
00:08:04,530 --> 00:08:08,210
while these other grid items fill the entire cell,
133
00:08:08,210 --> 00:08:12,980
as we can see here with these colors, okay?
134
00:08:12,980 --> 00:08:16,000
So this is how you create a simple grid.
135
00:08:16,000 --> 00:08:20,240
So actually all you need would be the columns
136
00:08:20,240 --> 00:08:22,940
and if you then want to also define the rows,
137
00:08:22,940 --> 00:08:27,940
you can do that by giving them an explicit height, okay?
138
00:08:28,280 --> 00:08:32,170
Now, just to finish this lecture, just like in flexbox,
139
00:08:32,170 --> 00:08:36,570
we can also specify a gap in CSS Grid.
140
00:08:36,570 --> 00:08:40,090
And actually this is the only way of defining space
141
00:08:40,090 --> 00:08:42,150
between the grid items.
142
00:08:42,150 --> 00:08:45,470
So always use gap and never margins
143
00:08:45,470 --> 00:08:47,950
that is simply not going to work.
144
00:08:47,950 --> 00:08:51,900
So we can use gap and this property actually
145
00:08:51,900 --> 00:08:54,660
used to be called grid gap,
146
00:08:54,660 --> 00:08:57,610
but they dropped that grid prefix
147
00:08:57,610 --> 00:09:01,120
when they also added gap to flexbox.
148
00:09:01,120 --> 00:09:03,470
So now it is simply called gap,
149
00:09:03,470 --> 00:09:08,350
but if you for some reasons see this somewhere,
150
00:09:08,350 --> 00:09:11,180
then just know that this is exactly the same
151
00:09:11,180 --> 00:09:13,163
and it will also work in browsers.
152
00:09:14,880 --> 00:09:17,850
But anyway, let's define now a gap,
153
00:09:17,850 --> 00:09:22,850
let's say 30 pixels and this will do exactly what we expect.
154
00:09:23,580 --> 00:09:26,700
So it creates some gap between these elements,
155
00:09:26,700 --> 00:09:30,140
both between the columns and the rows.
156
00:09:30,140 --> 00:09:32,640
Now what we cannot do in flexbox,
157
00:09:32,640 --> 00:09:35,450
but can do in grid is to actually define
158
00:09:35,450 --> 00:09:39,700
separate values for the column and for the rows.
159
00:09:39,700 --> 00:09:41,630
So let's do that.
160
00:09:41,630 --> 00:09:46,403
So we can say the column gap should still be 30.
161
00:09:47,990 --> 00:09:50,100
So let's remove this one
162
00:09:50,100 --> 00:09:54,290
and then the row gap should be,
163
00:09:54,290 --> 00:09:57,600
let's say double so 60 pixels.
164
00:09:57,600 --> 00:10:00,670
And so if we give this a space now,
165
00:10:00,670 --> 00:10:04,510
then you see some additional space has been created here
166
00:10:04,510 --> 00:10:07,240
to accommodate for that bigger gap.
167
00:10:07,240 --> 00:10:10,840
And so the entire grid has become a bit bigger
168
00:10:10,840 --> 00:10:14,300
and now here we have more space, okay?
169
00:10:14,300 --> 00:10:18,890
And that is the very, very fundamentals of CSS Grid.
170
00:10:18,890 --> 00:10:21,420
And I'm sure you can already start seeing
171
00:10:21,420 --> 00:10:25,250
the great power of this layout technology.
172
00:10:25,250 --> 00:10:28,050
So it's just these five properties
173
00:10:28,050 --> 00:10:30,950
we created this really complex layout.
174
00:10:30,950 --> 00:10:34,070
So even though it doesn't maybe look so complex,
175
00:10:34,070 --> 00:10:35,470
it actually is.
176
00:10:35,470 --> 00:10:39,460
And back in the day before flexbox and CSS Grid,
177
00:10:39,460 --> 00:10:41,530
this would have been really,
178
00:10:41,530 --> 00:10:44,180
a lot more difficult to achieve.
179
00:10:44,180 --> 00:10:48,920
So CSS Grid is really powerful and this is just the surface,
180
00:10:48,920 --> 00:10:51,490
and until the rest of this section,
181
00:10:51,490 --> 00:10:53,430
we will explore a little bit more
182
00:10:53,430 --> 00:10:55,653
about everything we can do with it.
13602
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.