1
00:00:00,112 --> 00:00:04,239
With CSS grid you have total
control over the spaces or

2
00:00:04,239 --> 00:00:06,998
gutters between columns and rows.

3
00:00:06,998 --> 00:00:12,963
You separate grid tracks using the grid-row-gap and grid-column-gap properties.

4
00:00:12,963 --> 00:00:18,646
So first I'll remove the h2 paragraph and
text from the grid container.

5
00:00:18,646 --> 00:00:22,800
Give that a save and
over in the grid rule,

6
00:00:22,800 --> 00:00:29,589
let's set a gutter between our
column tracks with grid-column-gap.

7
00:00:29,589 --> 00:00:34,595
The value for grid-column-gap and 
grid-row-gap can be any CSS length unit,

8
00:00:34,595 --> 00:00:37,950
or a percentage of
the parent container width.

9
00:00:37,950 --> 00:00:42,375
I'll set grid-column-gap to 20 pixels.

10
00:00:42,375 --> 00:00:48,130
And as you can see that creates a 20
pixel gutter between the column tracks.

11
00:00:48,130 --> 00:00:53,181
Now let's set a gutter for
the row tracks and the grid row,

12
00:00:53,181 --> 00:00:57,526
add grid-row-gap,
let's set it to 15 pixels.

13
00:01:00,177 --> 00:01:05,923
And you'll notice how the gutters do not
appear on the outer edges of the grid so

14
00:01:05,923 --> 00:01:11,860
there is no gutter before the first row
and column track or after the last tracks.

15
00:01:11,860 --> 00:01:15,809
The gaps are created between
adjacent columns and rows only.

16
00:01:15,809 --> 00:01:19,795
There's also a handy shorthand
property for sorting both row and

17
00:01:19,795 --> 00:01:21,905
column gaps at once, grid-gap.

18
00:01:21,905 --> 00:01:26,758
So back in my CSS,
i'll replace the column and

19
00:01:26,758 --> 00:01:30,874
row gap properties with just grid-gap.

20
00:01:30,874 --> 00:01:36,127
And in the shorthand property,
the first value sets the grid-row-gap,

21
00:01:36,127 --> 00:01:39,614
and the second value
sets the grid-column-gap.

22
00:01:43,461 --> 00:01:50,722
And writing just one value sets the gutter
size for both columns and rows.

23
00:01:50,722 --> 00:01:55,976
So now we have 15 pixel gutters
between all rows and columns.

24
00:01:55,976 --> 00:01:58,306
And that's the basics of creating a grid.

25
00:01:58,306 --> 00:02:01,242
You've just set up a CSS
grid layout in your page.

26
00:02:01,242 --> 00:02:04,605
Feel free to experiment
with the grid tracks and

27
00:02:04,605 --> 00:02:08,234
grid-gap values to see how
it changes the layout.

28
00:02:08,234 --> 00:02:12,857
Now let's quickly review how the grid
we created maps to the terminology

29
00:02:12,857 --> 00:02:15,225
concepts you've learned earlier.

30
00:02:15,225 --> 00:02:18,350
You know that the grid div is 
a grid container and

31
00:02:18,350 --> 00:02:21,485
the direct child elements
are the grid items.

32
00:02:21,485 --> 00:02:25,864
When we defined the grid tracks
with grid-template-columns and

33
00:02:25,864 --> 00:02:30,749
grid-template-rows, grid provided us
numbered lines called grid lines

34
00:02:30,749 --> 00:02:33,203
to use for positioning the items.

35
00:02:33,203 --> 00:02:37,011
You can refer to each grid
line by a numerical index.

36
00:02:37,011 --> 00:02:41,078
Columns start at one,
from left to right, by default and

37
00:02:41,078 --> 00:02:44,064
rows also begin at one from top to bottom.

38
00:02:44,064 --> 00:02:48,147
Keep in mind that a grid line
isn't a complete column or row.

39
00:02:48,147 --> 00:02:52,448
For instance, it takes two grid
lines to make a single column,

40
00:02:52,448 --> 00:02:54,162
one line on either side.

41
00:02:54,162 --> 00:03:01,515
So our three column, two row grid consists
of four column lines and three row lines.

42
00:03:01,515 --> 00:03:07,684
The vertical lines 1 and 2 determine the
start and end points of the first column,

43
00:03:07,684 --> 00:03:12,462
lines 2 and 3 the second column,
and lines 3 and 4 the third.

44
00:03:12,462 --> 00:03:17,547
Similarly, horizontal lines one and two
determine the position of the first row,

45
00:03:17,547 --> 00:03:19,953
and lines two and three the second row.

46
00:03:19,953 --> 00:03:24,642
Finally, grid gaps create separation
between columns and rows,

47
00:03:24,642 --> 00:03:28,169
but they do not affect
the position of grid lines.

48
00:03:28,169 --> 00:03:32,619
In other words, there's just a single
grid line between two columns even if

49
00:03:32,619 --> 00:03:35,135
there's a large gap between the columns.

50
00:03:35,135 --> 00:03:36,251
In a later video,

51
00:03:36,251 --> 00:03:40,279
you'll learn how to place items
on the grid using line numbers.

52
00:03:40,279 --> 00:03:44,653
So knowing these concepts now will
help you better understand how

53
00:03:44,653 --> 00:03:46,970
line-based positioning works.

54
00:03:46,970 --> 00:03:50,317
You've learned the most important
parts of CSS grid layout and

55
00:03:50,317 --> 00:03:54,675
you're starting to see how grid simplifies
the code needed to create layouts that

56
00:03:54,675 --> 00:03:56,589
used to require lots of extra code.

57
00:03:56,589 --> 00:03:58,467
But we're just getting started.

58
00:03:58,467 --> 00:04:02,375
In the next stage you'll get to know
grids, intelligent resizing and

59
00:04:02,375 --> 00:04:03,840
replacement abilities.

60
00:04:03,840 --> 00:04:08,476
You'll learn to use a new flexible length
unit designed just for grid, write your

61
00:04:08,476 --> 00:04:12,574
track list using less code, expand
grid items to fit available space and

62
00:04:12,574 --> 00:04:17,298
how to make items automatically wrap and
adjust according to the container width.

63
00:04:17,298 --> 00:04:17,960
See you soon.