1
00:00:00,660 --> 00:00:04,330
Now that you know the basic concepts and
terminology behind CSS Grid Layout,

2
00:00:04,330 --> 00:00:06,980
you're ready to learn the first
steps in creating a grid,

3
00:00:06,980 --> 00:00:10,120
defining the grid container and
setting up columns and rows.

4
00:00:10,120 --> 00:00:13,920
In this video, I'll introduce you
to the grid display value and

5
00:00:13,920 --> 00:00:17,500
two grid related properties,
grid-template-columns

6
00:00:17,500 --> 00:00:21,780
to define the columns, and
grid-template-rows to define the rows.

7
00:00:21,780 --> 00:00:24,347
To follow along,
launch the workspace for this video or

8
00:00:24,347 --> 00:00:27,252
download the project files to
use your preferred text editor.

9
00:00:27,252 --> 00:00:32,383
In the index.html file,
there is a reparative with the class grid,

10
00:00:32,383 --> 00:00:37,100
and nested inside are three
divs with a class item.

11
00:00:37,100 --> 00:00:42,698
Over in the CSS folder, there are two
style sheets, page.css and grid.css.

12
00:00:42,698 --> 00:00:46,310
page.css simply contains
the base styles for the page.

13
00:00:46,310 --> 00:00:50,150
You can see the base styles once you
preview your workspace in the browser.

14
00:00:50,150 --> 00:00:55,560
We're going to write our grid
layout styles here inside grid.css.

15
00:00:55,560 --> 00:00:58,330
CSS grid layout starts
with a grid container.

16
00:00:58,330 --> 00:01:02,948
A grid container is defined by setting
an element's display property to grid.

17
00:01:02,948 --> 00:01:08,136
So, the div, with the class grid
is going to be our grid container.

18
00:01:08,136 --> 00:01:09,615
And not only in the class grid, but

19
00:01:09,615 --> 00:01:12,185
you can turn any CSS selector
into a grid container.

20
00:01:12,185 --> 00:01:18,371
So, over in grid.css,
we'll create a new rule that targets grid,

21
00:01:18,371 --> 00:01:23,809
and let's start by giving it
a max-width of 800 pixels,

22
00:01:23,809 --> 00:01:27,026
then set its display value to grid.

23
00:01:29,948 --> 00:01:33,720
Setting display to grid turns
on the grid in the browser.

24
00:01:33,720 --> 00:01:36,550
So now, all direct children of grid,

25
00:01:36,550 --> 00:01:40,650
the item divs,
automatically become grid items.

26
00:01:40,650 --> 00:01:41,460
Now in the browser,

27
00:01:41,460 --> 00:01:45,670
aside from the width we set,
you won't see any visible changes yet.

28
00:01:45,670 --> 00:01:47,260
That's because by default,

29
00:01:47,260 --> 00:01:50,530
the grid container places its
grid items in a single column.

30
00:01:50,530 --> 00:01:54,590
So now we're going to place the grid
items into multiple columns and rows.

31
00:01:54,590 --> 00:01:57,480
In CSS grid layout, columns and rows or

32
00:01:57,480 --> 00:02:02,810
the space between two adjacent grid
lines are referred to as grid tracks.

33
00:02:02,810 --> 00:02:07,205
You use the grid-template-columns
property to set the column tracks, and

34
00:02:07,205 --> 00:02:10,050
grid-template-rows to set the row tracks.

35
00:02:10,050 --> 00:02:13,530
Both properties specify
the size of each grid track.

36
00:02:13,530 --> 00:02:16,175
You declare these properties
on the grid container.

37
00:02:16,175 --> 00:02:16,735
You see,

38
00:02:16,735 --> 00:02:21,439
the grid container CSS rule is like your
grid layout configuration rule because

39
00:02:21,439 --> 00:02:26,157
you're able to manage most of what happens
in your grid from just this one rule.

40
00:02:26,157 --> 00:02:30,397
So let's first create column tracks by
adding grid-template-columns inside

41
00:02:30,397 --> 00:02:31,215
the grid rule.

42
00:02:34,135 --> 00:02:35,186
And the value for

43
00:02:35,186 --> 00:02:40,410
this property is a space-separated
list of values known as a track list.

44
00:02:40,410 --> 00:02:44,204
Each value in the track list
specifies the size of a column, and

45
00:02:44,204 --> 00:02:47,434
there are several ways to
define these track values.

46
00:02:47,434 --> 00:02:50,812
The most straightforward is using
CSS length units like pixels.

47
00:02:50,812 --> 00:02:52,957
I'll show you some of those in this video,
but

48
00:02:52,957 --> 00:02:55,875
there are more advanced methods
like flexible length units and

49
00:02:55,875 --> 00:02:59,249
sizing functions, which you'll learn
in the next part of this course.

50
00:02:59,249 --> 00:03:03,826
So to layout each of the three items
inside the grid container div,

51
00:03:03,826 --> 00:03:06,862
we'll need to define three column tracks.

52
00:03:06,862 --> 00:03:10,104
I'll start by setting each column
track value to 200 pixels.

53
00:03:12,832 --> 00:03:17,190
The three grid tracks setup
three equal sized columns.

54
00:03:17,190 --> 00:03:21,120
It displays the items side by side,
each 200 pixels wide.

55
00:03:21,120 --> 00:03:24,960
And changing a value will change the size
of its corresponding column track.

56
00:03:24,960 --> 00:03:32,810
For example, setting the first value to
320 pixels makes the first column wider.

57
00:03:32,810 --> 00:03:37,380
You can also use percentages to set
a column's width relative to the width of

58
00:03:37,380 --> 00:03:38,460
the grid container.

59
00:03:38,460 --> 00:03:42,120
So for example,
the third column is now 20% wide.

60
00:03:43,700 --> 00:03:49,420
And you can use em and rem values, even
the CSS calc function in your track list.

61
00:03:49,420 --> 00:03:50,888
So feel free to pause the video and

62
00:03:50,888 --> 00:03:53,468
experiment with different
track size values on your own.

63
00:03:53,468 --> 00:03:57,846
But I'll go ahead and set the track
list back to 200 pixels for all 3.

64
00:04:00,478 --> 00:04:04,350
So now notice how there's all this
extra space after the last column.

65
00:04:04,350 --> 00:04:08,150
Well, that's because we've set
three fixed width columns and

66
00:04:08,150 --> 00:04:13,310
their combined widths do not take up
the full width of the grid container.

67
00:04:13,310 --> 00:04:19,120
Well, when you set any of the column
tracks value to auto, for example,

68
00:04:19,120 --> 00:04:23,920
the middle column, it will expand
the column to fill up the extra space.

69
00:04:23,920 --> 00:04:29,310
So the middle column is now flexible while
the first and last columns are fixed.

70
00:04:29,310 --> 00:04:33,370
Now this is just one of the ways you're
able to create flexible grid columns.

71
00:04:33,370 --> 00:04:36,660
And you'll learn more advanced methods
using flexible length units and

72
00:04:36,660 --> 00:04:38,500
sizing functions in the next stage.