1
00:00:00,430 --> 00:00:01,140
How'd it go?

2
00:00:01,140 --> 00:00:04,500
Were you able to create your grid
layout using grid template areas?

3
00:00:04,500 --> 00:00:07,820
If not, that's okay, you can watch the
solution, compare it to what you wrote,

4
00:00:07,820 --> 00:00:09,830
and then try to recreate it yourself.

5
00:00:09,830 --> 00:00:12,540
The goal was to get your
layout to look like this

6
00:00:12,540 --> 00:00:17,000
using the image grid-template-areas.png
as a reference.

7
00:00:17,000 --> 00:00:19,410
Now I'll show you how
I created the layout.

8
00:00:19,410 --> 00:00:22,990
You can also reference my code when
you download the project files.

9
00:00:22,990 --> 00:00:26,780
First, I'll need to
target each grid item and

10
00:00:26,780 --> 00:00:30,190
assign a custom name to
each of the grid areas.

11
00:00:30,190 --> 00:00:35,726
In index.html, I see that there are seven
items inside the grid container,

12
00:00:35,726 --> 00:00:38,037
so I'll start with the header.

13
00:00:38,037 --> 00:00:44,669
In layout.css, I'll target header and
assign it the grid-area, head.

14
00:00:50,820 --> 00:00:54,895
Then I'll target the main element and

15
00:00:54,895 --> 00:00:58,851
give it the grid-area name, main.

16
00:01:02,194 --> 00:01:06,929
Then I'll target the class about and

17
00:01:06,929 --> 00:01:10,752
set its grid-area to about.

18
00:01:10,752 --> 00:01:14,939
Below that target news and

19
00:01:14,939 --> 00:01:20,077
assign it the grid-area news,

20
00:01:20,077 --> 00:01:27,889
then links will have
the grid-area name links.

21
00:01:30,886 --> 00:01:37,980
And just a couple more,
ads, Will be named ads.

22
00:01:39,894 --> 00:01:48,330
And finally,
I'll give the footer a grid-area of foot.

23
00:01:48,330 --> 00:01:51,380
You probably named your grid areas
differently, and that's okay.

24
00:01:51,380 --> 00:01:52,720
These are just the names I'm using.

25
00:01:54,395 --> 00:01:59,017
Now in my grid container rule,
I'll begin building my

26
00:01:59,017 --> 00:02:03,750
grid by setting just the top
row track to 100 pixels.

27
00:02:05,223 --> 00:02:09,671
I'll add grid-template-rows 100 pixels.

28
00:02:11,590 --> 00:02:15,840
So one value declares one row track only.

29
00:02:15,840 --> 00:02:20,130
It's going to set the height of
the top most row or the header.

30
00:02:20,130 --> 00:02:25,129
And since I set the height to 100vh,
all remaining rows will

31
00:02:25,129 --> 00:02:29,480
stretch to evenly fill
the available vertical space.

32
00:02:29,480 --> 00:02:35,380
Next, I'll declare 3 flexible column
tracks using grid template columns.

33
00:02:38,270 --> 00:02:42,962
The first track should take up 2
fractions of the available space, so

34
00:02:42,962 --> 00:02:45,810
I'll set the first value to 2fr.

35
00:02:45,810 --> 00:02:50,410
And the second and third tracks should
take one fraction of the space.

36
00:02:50,410 --> 00:02:53,710
So I´ll set the second and
third values to 1fr.

37
00:02:54,860 --> 00:03:01,850
To apply 10 pixel gutter between rows and
columns, I´ll use the grid-gap,

38
00:03:01,850 --> 00:03:07,700
shorthand property, and
set the value to 10 pixels.

39
00:03:07,700 --> 00:03:09,770
Finally, the fun part,

40
00:03:09,770 --> 00:03:13,680
placing the items on the grid using
the grid area names I assigned.

41
00:03:15,380 --> 00:03:18,350
You use the grid-template-areas property

42
00:03:18,350 --> 00:03:21,969
to place the items onto the grid
using their named grid areas.

43
00:03:24,450 --> 00:03:28,960
The value for grid template areas
should be a set of strings.

44
00:03:28,960 --> 00:03:33,520
Remember, each separate string
creates a row on the grid.

45
00:03:33,520 --> 00:03:39,130
In grid-template-areas.png,
I see that I need to set four rows.

46
00:03:41,460 --> 00:03:45,155
So, I'll add four sets of
strings as the value for

47
00:03:45,155 --> 00:03:48,700
grid-template-areas and
place each on it's own line.

48
00:03:56,110 --> 00:04:01,244
So now, to stretch the header
across the first row, like this,

49
00:04:01,244 --> 00:04:07,060
I'll write the head grid area name
three times inside the first string.

50
00:04:09,660 --> 00:04:13,690
I'm writing it three times because
I set three column tracks.

51
00:04:13,690 --> 00:04:18,260
Then, to place the main element
on the first column and

52
00:04:18,260 --> 00:04:24,350
stretch it from the second row track to
the bottom row track, I'll place main

53
00:04:25,750 --> 00:04:31,960
first in the second, third,
and fourth strings, or rows.

54
00:04:33,518 --> 00:04:38,324
Next, I'll place the about and
news items inside

55
00:04:38,324 --> 00:04:42,910
the second and
third columns of the second row.

56
00:04:44,600 --> 00:04:49,070
And the links and
ads items inside the second and

57
00:04:49,070 --> 00:04:51,700
third column tracks of the third row.

58
00:04:51,700 --> 00:04:54,240
Finally, I'll place the footer
inside the second and

59
00:04:54,240 --> 00:04:59,130
third columns of the bottom row by
writing the foot grid area name twice.

60
00:05:00,830 --> 00:05:02,080
All right,
let's have a look in the browser.

61
00:05:03,670 --> 00:05:05,650
The grid layout is all set.

62
00:05:05,650 --> 00:05:09,350
I hope you were able to complete this
grid practice session successfully.

63
00:05:09,350 --> 00:05:12,370
If not, why not start over and
try to write the grid properties and

64
00:05:12,370 --> 00:05:14,600
values without looking at my version.

65
00:05:14,600 --> 00:05:16,040
Thanks everyone, and happy coding.