Bummer! You have been redirected as the page you requested could not be found.
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 CSS Grid Layout!
You have completed CSS Grid Layout!
Preview
You can control how much vertical space a row takes up by defining row tracks. The grid-template-rows property creates rows in your grid.
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
If we go back to index.html and add more
grid items inside the grid container.
0:00
So let's copy the three items,
paste them below and
0:06
change the numbers to 4, 5, and 6.
0:09
Notice how the new items start a new row,
and
0:18
they line up with
the items in the first row.
0:21
So they follow the three column
track set and grid template columns.
0:24
And if you add more items
to the grid container,
0:30
the grid will keep creating
rows as needed for the content.
0:32
But we haven't explicitly
defined rows in our grid yet.
0:36
So by default, the rows are as tall
as the content that they hold.
0:41
But you can control how much
vertical space a row takes up
0:45
by defining row tracks.
0:48
And the grid template rows property
is what creates rows in your grid.
0:50
So let's go back to grid.css and
0:54
add the grid template rows
property to the grid rule.
0:56
And let's first set one
row track of 100 pixels.
1:03
Now, this one value sets
the track-sizing for the first row.
1:07
So the top row's now 100 pixels tall
1:11
while the bottom rows still as
tall as the content inside it.
1:14
And if we add a second value to
the track list of say 200 pixels.
1:18
The first row is 100 pixels tall, and
the second row is now 200 pixels tall.
1:25
So now that the grid is set up,
1:30
any direct children of the container
will be laid out in the grid.
1:32
So for example, adding any two elements
inside the grid container, like an h2 and
1:36
a paragraph, will make each one a grid
item and align them to the column tracks.
1:42
Also notice how the grid leaves an empty
space for the third column track,
1:48
because there are not enough
items to fill up the bottom row.
1:54
Well, even if you place some text
directly inside the grid container
1:57
without wrapping it in a tag,
it will still form its own grid item.
2:02
This is called an anonymous grid item.
2:06
Remember, only direct children of a grid
container are treated as grid items.
2:11
This means that grid layout does not
affect the content inside grid items.
2:16
But a grid item can also
be a grid container.
2:22
To lay out the contents of
a grid item with CSS Grid,
2:25
you set display grid on that item and
define its grid tracks.
2:29
By doing that, you're essentially
nesting a grid within a grid.
2:33
So coming up next, I'll show you
how easily CSS Grid lets you create
2:36
separation between columns and rows.
2:40
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