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
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
So how'd it go,
were you able to write most or
0:00
all of the grid selectors properties and
values for this practice session?
0:02
If not, that's okay, you can watch my
solution, compare it to what you wrote,
0:06
and then try to recreate it yourself.
0:10
The goal was to get the layout to
look like this, as you can see,
0:12
it consists of three column tracks and
three row tracks.
0:15
Now, let's go over the solution, and
0:19
you can also reference this code when
you download the project's files.
0:20
So first, I'll determine which HTML
element is the grid container.
0:24
Well, looking at the HTML,
0:29
I see that the div with the class wrapper
contains the elements to layout with grid.
0:31
So in grid.css,
0:36
I'll replace the placeholder selector
with the class selector wrapper.
0:38
CSS grid layout starts with a grid
container, so next, in the wrapper rule,
0:45
I need to write the declaration that
turns on the grid in the browser.
0:50
Remember, a grid container is defined by
setting an element's display property
0:54
to grid.
0:59
Now all direct children of wrapper
automatically become grid items,
1:02
I can start positioning and
aligning them into a grid.
1:07
Now that I've established
the grid formatting context,
1:11
I'm going to declare the three row tracks.
1:14
The grid template rows property
creates rows in the grid.
1:18
And the row tracks should be declared as
100 pixels, 400 pixels, and 200 pixels.
1:27
Next, I'll declare
the three column tracks,
1:36
you set grid columns with
grid-template-columns.
1:39
And I'll make all three
columns 320 pixels wide.
1:46
Finally I can create separation
between columns and rows,
1:52
using the grid-row-gap and
grid-column-gap properties.
1:56
So first I'll apply a 20
pixel gutter to the rows,
2:00
with grid-row-gap: 20px, and set 15 pixel
2:05
column gutters with grid-column-gap: 15px.
2:11
You could have also used
the grid gap shorthand property,
2:16
to set both the row and
column gaps at once.
2:21
For example, I'll replace the column and
row gap properties with grid-gap.
2:24
The first value sets the grid row gap, and
the second value sets the grid column gap.
2:32
All right, so now I've set up a grid
that's made up of three columns and
2:40
three rows.
2:44
Remember, the grid is made of a set
of intersecting horizontal and
2:46
vertical lines called grid lines.
2:50
So this grid consists of four column
grid lines, and four row grid lines.
2:52
So I hope you were able to complete
this grid practice session successfully.
3:00
If not, why not start over and
try to write the grid properties and
3:03
values without looking at my version.
3:06
I'm also going to teach you a whole lot
more about grid layout in the last two
3:08
stages of my CSS grid course, so
I'll see you soon, and happy coding.
3:11
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