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 CSS Grid: Columns, Rows and Gaps!
You have completed Practice CSS Grid: Columns, Rows and Gaps!
Preview
See an overview of the grid columns, rows, and gaps 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
[MUSIC]
0:00
Hi everyone Guil here,
it's time for some practice.
0:04
Practice is a good thing.
0:07
It helps make what you've
learned stick and last longer.
0:08
But also helps you become a faster and
better developer.
0:11
CSS grid layout can be
challenging at times, so
0:14
let's practice the basics of CSS grid
to make sure your knowledge sticks.
0:17
This practice session covers creating
rows, columns and gutters with Grid.
0:21
It's a great follow up to the first
stage of my CSS Grid Layout course.
0:25
So if you haven't taken that yet, and find
this practice session too difficult or
0:29
realize that none of the Grid
concepts sound familiar,
0:33
than take this course first.
0:36
I've posted the link in
the teacher's notes of this video.
0:38
To get started launch
the workspace with this video.
0:41
I've included HTML and
CSS files for this exercise.
0:44
One of the style sheets linked to the HTML
page.CSS already includes the base
0:48
styles for the page which you can see when
you preview index.html in the browser.
0:52
Now let's walk through
what you'll need to do.
0:58
In the file grid.css, you'll see
1:01
five comments with instructions on the CSS
selector and styles you'll need to write.
1:05
So first, you'll need to determine which
HTML element is the grid container, then
1:10
target it by replacing this placeholder
selector with the grid container selector.
1:16
Then in the grid container rule,
1:22
you'll need to write the declaration
that turns on the grid in the browser.
1:24
Once you've established
the grid formatting context,
1:29
you will declare three row tracks in the
following order, 100px, 400px and 200px.
1:32
Then you'll declare
three column tracks and
1:39
make sure they're each 320 pixels wide.
1:42
Finally, you'll create separation
between the columns and rows by applying
1:46
a 20 pixel gutter to rows, and
a 15 pixel gutter to columns.
1:51
The goal is to get your
layout to look like this.
1:57
This exercise is a great way to practice
what you've learned so far about CSS Grid.
2:00
So, good luck, have fun.
2:05
And in the next video,
I'll walk you through the solution.
2:06
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