1
00:00:00,640 --> 00:00:04,420
Grid areas are the slots on the grid
where grid items are placed.

2
00:00:04,420 --> 00:00:08,440
One of the ways grid areas get created
is when you place an item using line

3
00:00:08,440 --> 00:00:10,240
based placement, for instance,

4
00:00:10,240 --> 00:00:14,480
the layout we created in the previous
video is made up of four grid areas.

5
00:00:14,480 --> 00:00:17,800
The header, main, aside, and footer areas.

6
00:00:17,800 --> 00:00:21,940
A grid area is always enclosed by
four grid lines, one on each side.

7
00:00:21,940 --> 00:00:26,870
For instance, the header's grid area
consists of the space between the first

8
00:00:26,870 --> 00:00:31,860
and second row grid lines and
the first and third column lines.

9
00:00:31,860 --> 00:00:35,010
And the aside's grid area is
bound by row lines two and

10
00:00:35,010 --> 00:00:38,870
five and column lines two and three.

11
00:00:38,870 --> 00:00:41,950
You've learned how to position
items against grid lines

12
00:00:41,950 --> 00:00:43,730
using line based placement.

13
00:00:43,730 --> 00:00:47,659
Well, CSS grid provides
a delightful feature that lets

14
00:00:47,659 --> 00:00:49,900
you create named grid areas.

15
00:00:49,900 --> 00:00:53,820
Then you can use those names
to position items on the grid.

16
00:00:53,820 --> 00:00:57,730
So in this video, we're going to have some
fun laying out the header, main, aside,

17
00:00:57,730 --> 00:01:00,980
and footer items using
grid template areas.

18
00:01:00,980 --> 00:01:04,080
First, we're going to use
the grid-area property

19
00:01:04,080 --> 00:01:08,570
to assign a custom name to
each of the four grid areas.

20
00:01:08,570 --> 00:01:11,510
Then we'll use
the grid-template-areas property

21
00:01:11,510 --> 00:01:16,610
to define how our layout looks by
referencing those custom named areas.

22
00:01:16,610 --> 00:01:21,532
To start, I'll delete the line placement
properties, from the header, main, aside,

23
00:01:21,532 --> 00:01:22,697
and footer rule, but

24
00:01:22,697 --> 00:01:27,342
you can just comment them out if you
want to use them as reference for later.

25
00:01:27,342 --> 00:01:30,610
Now, we're going to give each
selector a grid area name.

26
00:01:30,610 --> 00:01:34,590
We'll start with a header, so
let's add the grid-area-property

27
00:01:34,590 --> 00:01:38,680
inside the header rule, and
assign it the name header.

28
00:01:38,680 --> 00:01:42,220
And you can give a grid area
any name you want, for example,

29
00:01:42,220 --> 00:01:45,250
head, hd, or just the letter h.

30
00:01:45,250 --> 00:01:48,740
I'm choosing to identify
the area with the name header.

31
00:01:48,740 --> 00:01:54,190
Next, I'll give the main element
a grid-area value of main.

32
00:01:55,720 --> 00:02:00,070
Then set aside's grid-area value to aside.

33
00:02:01,560 --> 00:02:06,928
And we'll give the footer
a grid-area value of footer.

34
00:02:06,928 --> 00:02:10,350
Now, the grid-area property is
just a shorthand property for

35
00:02:10,350 --> 00:02:13,120
setting a grid item's size and
location within the grid.

36
00:02:13,120 --> 00:02:16,293
So it could do a whole lot more than
just assign names to grid-areas, but

37
00:02:16,293 --> 00:02:18,382
that's what we're using it for
in this video.

38
00:02:18,382 --> 00:02:22,720
I've also posted resources about the
grid-area-property in the teacher's notes.

39
00:02:22,720 --> 00:02:28,280
Up in the grid container rule,
we'll keep the same two column tracks,

40
00:02:28,280 --> 00:02:33,250
but let's set the row tracks back to three
rows by removing the fourth row track,

41
00:02:33,250 --> 00:02:34,440
set to 100 pixels.

42
00:02:35,580 --> 00:02:38,650
And next,
right here in the container rule,

43
00:02:38,650 --> 00:02:45,490
we'll use the grid-template-areas property
to place the header, main, aside,

44
00:02:45,490 --> 00:02:51,260
and footer items onto the grid by
referencing their named grid-areas.

45
00:02:51,260 --> 00:02:52,450
This is the fun part.

46
00:02:52,450 --> 00:02:56,790
You see,
by assigning a name to each grid item,

47
00:02:56,790 --> 00:03:01,560
we've defined a set of individual and
reusable grid-template-areas

48
00:03:01,560 --> 00:03:06,360
we can place on the grid via
the grid-template-areas property.

49
00:03:06,360 --> 00:03:10,100
The value for grid-template-areas
should be a set of strings.

50
00:03:10,100 --> 00:03:13,520
And each separate string
creates a row on the grid.

51
00:03:13,520 --> 00:03:17,910
We need three rows, so
let's first create three empty strings.

52
00:03:19,300 --> 00:03:24,560
And I like to place each string on its
own line to make the code more readable,

53
00:03:24,560 --> 00:03:27,660
and you'll see how it's going to help you
visualize the structure of your grid.

54
00:03:30,090 --> 00:03:35,310
Inside the strings, you reference your
grid-area names, and grid-template-areas

55
00:03:35,310 --> 00:03:39,070
will place items on the grid based
on where you write the names.

56
00:03:39,070 --> 00:03:39,900
So in other words,

57
00:03:39,900 --> 00:03:43,660
how you write them is going to be
how they appear in the browser.

58
00:03:43,660 --> 00:03:49,070
So let's start with the first string which
represents the first row on the grid,

59
00:03:49,070 --> 00:03:52,520
and we're going to place
the header inside the first row

60
00:03:52,520 --> 00:03:55,550
by writing the header grid-area name.

61
00:03:55,550 --> 00:04:01,080
And our grid has two column tracks, so
we'll span the header across both tracks,

62
00:04:01,080 --> 00:04:06,605
from one edge of the grid to the other,
by writing header two times.

63
00:04:06,605 --> 00:04:11,600
In the next string, or row,
we'll place the main item

64
00:04:11,600 --> 00:04:15,910
inside the first column track by
writing its named grid-area, main.

65
00:04:15,910 --> 00:04:19,190
Then, we'll place the aside
in the second column.

66
00:04:19,190 --> 00:04:22,764
And finally,
the footer will span the entire third row.

67
00:04:22,764 --> 00:04:26,206
So just like the header,
let's write the footer grid-area twice.

68
00:04:28,711 --> 00:04:33,800
So to recap,
each separate string creates a row.

69
00:04:33,800 --> 00:04:39,720
And a column is created for each word or
grid-area name in the string.

70
00:04:39,720 --> 00:04:43,500
And make sure that you include
a space between each grid-area name,

71
00:04:43,500 --> 00:04:46,415
otherwise, the browser will
not recognize the grid-areas.

72
00:04:48,110 --> 00:04:49,025
Let's have a look in the browser.

73
00:04:50,410 --> 00:04:55,230
And just like that we've created our
site layout using grid-template-areas.

74
00:04:55,230 --> 00:04:58,280
And what's really neat is that
the Firefox Grid Inspector

75
00:04:58,280 --> 00:05:01,570
can display the area names
in the grid overlay.

76
00:05:01,570 --> 00:05:04,140
So I'm still here using Firefox nightly,
and

77
00:05:04,140 --> 00:05:07,650
in the Grid panel under
Grid Display Settings,

78
00:05:07,650 --> 00:05:13,000
check Display area names, and it will
show you the names of each grid-area.

79
00:05:13,000 --> 00:05:17,275
As you can see, it resembles exactly
what we've written as the value for

80
00:05:17,275 --> 00:05:18,630
grid-template-areas.

81
00:05:18,630 --> 00:05:23,360
And this is what I meant earlier when I
mentioned that placing each string on its

82
00:05:23,360 --> 00:05:26,880
own line gives you a precise visualization
of the structure of your grid.

83
00:05:28,160 --> 00:05:29,820
So as you can see, this is a fun and

84
00:05:29,820 --> 00:05:33,560
useful way to prototype layouts with
grid because you can easily and

85
00:05:33,560 --> 00:05:36,810
quickly move items around to
see where they might fit best.

86
00:05:36,810 --> 00:05:37,869
For instance,

87
00:05:37,869 --> 00:05:43,094
you can quickly swap the placement of
columns like the main and aside items.

88
00:05:47,480 --> 00:05:50,683
Or you can make a grid-area
take up multiple

89
00:05:50,683 --> 00:05:54,060
spaces by simply repeating its name.

90
00:05:54,060 --> 00:05:58,976
For example, I'll replace
the second footer name with aside

91
00:06:02,300 --> 00:06:06,200
And the aside now takes up
part of the third row, and

92
00:06:06,200 --> 00:06:11,188
we can quickly test how it looks
when the main item takes up a larger

93
00:06:11,188 --> 00:06:16,285
area of the grid, so I'll set
the third string to main and footer.

94
00:06:19,143 --> 00:06:22,839
You can also leave empty spaces or
empty grid cells using a period or

95
00:06:22,839 --> 00:06:24,580
the full stop character.

96
00:06:24,580 --> 00:06:28,440
For example, to display the footer
below just the aside and

97
00:06:28,440 --> 00:06:31,940
leave an empty space below
the main content area,

98
00:06:31,940 --> 00:06:36,590
replace the main area and
the third string with a period.

99
00:06:39,410 --> 00:06:42,879
Or you can display the footer
below the main content and

100
00:06:42,879 --> 00:06:45,227
leave an empty cell below the aside.

101
00:06:51,680 --> 00:06:57,167
You're able to use one or any number of
dots to represent an empty grid cell,

102
00:06:57,167 --> 00:07:01,819
for example, three as long as
there are no spaces between them.

103
00:07:06,341 --> 00:07:11,780
Developers often refer to this as
the ASCII method of grid layout.

104
00:07:11,780 --> 00:07:16,040
Because it resembles the ASCII design
technique where you form pictures or

105
00:07:16,040 --> 00:07:18,590
art out of special ASCII characters.

106
00:07:18,590 --> 00:07:21,920
So I suggest experimenting
with grid-template-areas

107
00:07:21,920 --> 00:07:26,220
to see how quickly you're able to
create different layout combinations.

108
00:07:26,220 --> 00:07:29,130
They're not only useful,
but also fun to use.

109
00:07:29,130 --> 00:07:33,908
In fact, I'll create a grid-template-areas
practice challenge for you now.

110
00:07:33,908 --> 00:07:39,830
In the index.html file, let's add
a new item to the grid container.

111
00:07:39,830 --> 00:07:43,465
So I'll include a nav
element below the header.

112
00:07:46,572 --> 00:07:50,700
Then in the grid container rule,
add a third column track.

113
00:07:50,700 --> 00:07:54,360
So I'll write 1fr as the first track.

114
00:07:54,360 --> 00:07:58,780
And I'll leave it up to you to place the
new item on the grid using grid-area and

115
00:07:58,780 --> 00:08:00,560
grid-template-areas.

116
00:08:00,560 --> 00:08:02,966
I'll show you my solution
in the next video.