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
See an overview of the grid using Grid Templates Areas that you'll create.
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
Hey everyone, Guil here,
0:04
it's time to sharpen your grid layout
skills by practicing grid template areas.
0:05
A feature of grid that lets you assign
named grid areas to grid items,
0:10
then you use those names to
position the items on the grid.
0:14
This exercise is a follow up to the third
stage of my CSS grid layout course.
0:17
So if you haven't taken that yet,
I suggest you finish the course before
0:22
trying this challenge, I've also added the
link to the course in the teacher's note.
0:25
So you're going to layout this web
page using grid template areas, and
0:29
to get started,
launch the workspace with this video.
0:34
I've included HTML and
CSS files for this exercise,
0:37
index.html contains a div
with the class grid.
0:41
Inside grid are seven elements,
such as a header,
0:46
main, footer, and divs,
with classes like about, news, and links.
0:50
The file page.css contains
the basic styles for the page,
0:54
which you can see when you preview
index.html in the browser.
0:59
You are going to write your CSS
inside the file layout.css, so
1:04
now let's work through what you'll
need to do here in the layout.css.
1:09
You'll see five comments with
instructions about the css selectors and
1:14
styles you'll need to write.
1:18
First you'll need to target each grid
item and assign it a grid area name.
1:20
Remember, grid areas are the slots on
the grid where grid items get placed, and
1:27
you can give a grid
area any name you want.
1:32
Then down in the grid container rule,
1:35
you'll begin building the grid by setting
just the top row track to 100 pixels.
1:38
Below that, you'll declare
three flexible column tracks,
1:44
the first track should take up two
fractions of the available space.
1:49
And the second and third tracks should
take up one fraction of the space.
1:53
Then you'll apply a ten pixel
gutter between rows and columns.
1:59
Finally, you'll place the items on
the grid using the grid area names
2:03
assigned to them.
2:08
Now you should use the image
gridtemplateareas.png,
2:10
located in the workspace, as a reference.
2:14
So the goal is to get your
layout to look like this,
2:17
first, you'll stretch the header
across the first row.
2:21
Then stretch the main element
from the second row track down to
2:26
the bottom row track.
2:30
Then place the About, News, Links,
and Ads items on the second and
2:32
third column tracks and the second and
third row tracks, like this.
2:38
And the footer should take up the second
and third column tracks of the bottom row.
2:44
And while you're creating your grid,
feel free to use the handy Firefox grid
2:50
inspector to help you place
the items on the grid.
2:54
This exercise is a great way to
practice what you've learned so
2:57
far about grid template areas.
3:00
Good luck, have fun, and in the next
video I'll walk you through one solution.
3:02
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