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