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
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