1
00:00:00,318 --> 00:00:02,720
So how'd it go,
were you able to write most or

2
00:00:02,720 --> 00:00:06,400
all of the grid selectors properties and
values for this practice session?

3
00:00:06,400 --> 00:00:10,004
If not, that's okay, you can watch my
solution, compare it to what you wrote,

4
00:00:10,004 --> 00:00:12,120
and then try to recreate it yourself.

5
00:00:12,120 --> 00:00:15,450
The goal was to get the layout to
look like this, as you can see,

6
00:00:15,450 --> 00:00:19,370
it consists of three column tracks and
three row tracks.

7
00:00:19,370 --> 00:00:20,830
Now, let's go over the solution, and

8
00:00:20,830 --> 00:00:24,550
you can also reference this code when
you download the project's files.

9
00:00:24,550 --> 00:00:29,760
So first, I'll determine which HTML
element is the grid container.

10
00:00:29,760 --> 00:00:31,720
Well, looking at the HTML,

11
00:00:31,720 --> 00:00:36,676
I see that the div with the class wrapper
contains the elements to layout with grid.

12
00:00:36,676 --> 00:00:38,810
So in grid.css,

13
00:00:38,810 --> 00:00:44,410
I'll replace the placeholder selector
with the class selector wrapper.

14
00:00:45,600 --> 00:00:50,800
CSS grid layout starts with a grid
container, so next, in the wrapper rule,

15
00:00:50,800 --> 00:00:54,700
I need to write the declaration that
turns on the grid in the browser.

16
00:00:54,700 --> 00:00:59,430
Remember, a grid container is defined by
setting an element's display property

17
00:00:59,430 --> 00:00:59,950
to grid.

18
00:01:02,690 --> 00:01:07,720
Now all direct children of wrapper
automatically become grid items,

19
00:01:07,720 --> 00:01:10,050
I can start positioning and
aligning them into a grid.

20
00:01:11,750 --> 00:01:14,890
Now that I've established
the grid formatting context,

21
00:01:14,890 --> 00:01:16,880
I'm going to declare the three row tracks.

22
00:01:18,320 --> 00:01:22,260
The grid template rows property
creates rows in the grid.

23
00:01:27,020 --> 00:01:34,620
And the row tracks should be declared as
100 pixels, 400 pixels, and 200 pixels.

24
00:01:36,480 --> 00:01:39,340
Next, I'll declare
the three column tracks,

25
00:01:39,340 --> 00:01:43,755
you set grid columns with
grid-template-columns.

26
00:01:46,627 --> 00:01:50,450
And I'll make all three
columns 320 pixels wide.

27
00:01:52,780 --> 00:01:56,409
Finally I can create separation
between columns and rows,

28
00:01:56,409 --> 00:02:00,650
using the grid-row-gap and
grid-column-gap properties.

29
00:02:00,650 --> 00:02:05,987
So first I'll apply a 20
pixel gutter to the rows,

30
00:02:05,987 --> 00:02:11,205
with grid-row-gap: 20px, and set 15 pixel

31
00:02:11,205 --> 00:02:16,630
column gutters with grid-column-gap: 15px.

32
00:02:16,630 --> 00:02:21,750
You could have also used
the grid gap shorthand property,

33
00:02:21,750 --> 00:02:24,680
to set both the row and
column gaps at once.

34
00:02:24,680 --> 00:02:29,775
For example, I'll replace the column and
row gap properties with grid-gap.

35
00:02:32,030 --> 00:02:38,160
The first value sets the grid row gap, and
the second value sets the grid column gap.

36
00:02:40,390 --> 00:02:44,980
All right, so now I've set up a grid
that's made up of three columns and

37
00:02:44,980 --> 00:02:46,360
three rows.

38
00:02:46,360 --> 00:02:50,310
Remember, the grid is made of a set
of intersecting horizontal and

39
00:02:50,310 --> 00:02:52,590
vertical lines called grid lines.

40
00:02:52,590 --> 00:03:00,060
So this grid consists of four column
grid lines, and four row grid lines.

41
00:03:00,060 --> 00:03:03,580
So I hope you were able to complete
this grid practice session successfully.

42
00:03:03,580 --> 00:03:06,290
If not, why not start over and
try to write the grid properties and

43
00:03:06,290 --> 00:03:08,250
values without looking at my version.

44
00:03:08,250 --> 00:03:11,500
I'm also going to teach you a whole lot
more about grid layout in the last two

45
00:03:11,500 --> 00:03:14,920
stages of my CSS grid course, so
I'll see you soon, and happy coding.