Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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