Preview
Video Player
00:00
00:00
Setting Grid Rows
2:43You can control how much vertical space a row takes up by defining row tracks. The grid-template-rows property creates rows in your grid.
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