Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Grid Template Areas!
You have completed Practice Grid Template Areas!
Preview
Follow along to see how to lay out the web page using CSS Grid layout.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How'd it go?
0:00
Were you able to create your grid
layout using grid template areas?
0:01
If not, that's okay, you can watch the
solution, compare it to what you wrote,
0:04
and then try to recreate it yourself.
0:07
The goal was to get your
layout to look like this
0:09
using the image grid-template-areas.png
as a reference.
0:12
Now I'll show you how
I created the layout.
0:17
You can also reference my code when
you download the project files.
0:19
First, I'll need to
target each grid item and
0:22
assign a custom name to
each of the grid areas.
0:26
In index.html, I see that there are seven
items inside the grid container,
0:30
so I'll start with the header.
0:35
In layout.css, I'll target header and
assign it the grid-area, head.
0:38
Then I'll target the main element and
0:50
give it the grid-area name, main.
0:54
Then I'll target the class about and
1:02
set its grid-area to about.
1:06
Below that target news and
1:10
assign it the grid-area news,
1:14
then links will have
the grid-area name links.
1:20
And just a couple more,
ads, Will be named ads.
1:30
And finally,
I'll give the footer a grid-area of foot.
1:39
You probably named your grid areas
differently, and that's okay.
1:48
These are just the names I'm using.
1:51
Now in my grid container rule,
I'll begin building my
1:54
grid by setting just the top
row track to 100 pixels.
1:59
I'll add grid-template-rows 100 pixels.
2:05
So one value declares one row track only.
2:11
It's going to set the height of
the top most row or the header.
2:15
And since I set the height to 100vh,
all remaining rows will
2:20
stretch to evenly fill
the available vertical space.
2:25
Next, I'll declare 3 flexible column
tracks using grid template columns.
2:29
The first track should take up 2
fractions of the available space, so
2:38
I'll set the first value to 2fr.
2:42
And the second and third tracks should
take one fraction of the space.
2:45
So I´ll set the second and
third values to 1fr.
2:50
To apply 10 pixel gutter between rows and
columns, I´ll use the grid-gap,
2:54
shorthand property, and
set the value to 10 pixels.
3:01
Finally, the fun part,
3:07
placing the items on the grid using
the grid area names I assigned.
3:09
You use the grid-template-areas property
3:15
to place the items onto the grid
using their named grid areas.
3:18
The value for grid template areas
should be a set of strings.
3:24
Remember, each separate string
creates a row on the grid.
3:28
In grid-template-areas.png,
I see that I need to set four rows.
3:33
So, I'll add four sets of
strings as the value for
3:41
grid-template-areas and
place each on it's own line.
3:45
So now, to stretch the header
across the first row, like this,
3:56
I'll write the head grid area name
three times inside the first string.
4:01
I'm writing it three times because
I set three column tracks.
4:09
Then, to place the main element
on the first column and
4:13
stretch it from the second row track to
the bottom row track, I'll place main
4:18
first in the second, third,
and fourth strings, or rows.
4:25
Next, I'll place the about and
news items inside
4:33
the second and
third columns of the second row.
4:38
And the links and
ads items inside the second and
4:44
third column tracks of the third row.
4:49
Finally, I'll place the footer
inside the second and
4:51
third columns of the bottom row by
writing the foot grid area name twice.
4:54
All right,
let's have a look in the browser.
5:00
The grid layout is all set.
5:03
I hope you were able to complete this
grid practice session successfully.
5:05
If not, why not start over and
try to write the grid properties and
5:09
values without looking at my version.
5:12
Thanks everyone, and happy coding.
5:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up