Preview
Video Player
00:00
00:00
Position Items by Grid Lines
9:19CSS Grid lets you exercise even greater control by specifying the placement of individual grid items. You can use grid line numbers to control how items are placed, by applying properties directly to a grid item. This gives you precise control over grid item placement, size and order.
You've seen how we can create
grid tracks to layout grid items,
0:00
however CSS Grid lets you
exercise even greater control
0:04
by specifying the placement
of individual grid items.
0:08
You can use grid line numbers
to control how items are placed
0:11
by applying properties
directly to a grid item.
0:16
This gives you precise control over
grid item placement, size, and
0:18
order because you can specify on
which line a grid item starts and
0:23
ends, and
how many tracks it should expand.
0:28
Line based placement makes it possible to
build your entire page using grid layout.
0:31
So in this video, we're going to
create this common web page layout,
0:36
consisting of a header, main, aside,
footer area using line based placement.
0:40
Be sure to launch the new Workspace
with this video or
0:45
download the project
files to follow along.
0:47
In the workspace, the file index.html
contains a div with a class container and
0:50
nested inside are header, main,
aside, and footer elements.
0:55
The container div is our grid container
and its children are grid items.
0:59
Open a file grid.css and
the first thing we'll do is to create
1:04
the grid by writing display:
grid inside the container rule.
1:09
Next, we'll create row and column tracks.
1:14
Let's create two flexible column
tracks with grid-template-columns.
1:18
We'll set the first column track to 2fr,
and the second to 1fr.
1:24
And we need to define three row tracks,
one row for the header, another for
1:31
the main and aside content,
and one for the footer.
1:36
So we'll put grid-template-rows, and
1:39
set the tracks to 100 pixels,
350 pixels, and 100 pixels.
1:44
I'll preview the workspace and we can see
that the four grid items are laid out
1:50
according to the grid
default auto placement rules.
1:55
We set two column tracks, so
1:58
the header and main elements
are placed on the first row and
2:01
the aside and footer get placed on
the second row track set to 350 pixels.
2:06
Now the third row track is empty for now,
we'll place the footer inside it soon.
2:11
We set the first column track to 2fr,
so the header and
2:16
aside are taking up two fractions of
the available space, while the main and
2:21
footer items are taking up one fraction.
2:26
I'll switch over to Firefox Nightly,
and when I turn on the grid inspector,
2:30
you'll see that the two column, three
row grid we've set up consists of three
2:35
column grid lines and four row grid lines.
2:41
Remember, the numbers refer to the lines
and not the actual columns and rows.
2:45
So even though there are just two columns,
we have three line numbers.
2:50
That's also true for the rows.
2:55
You'll learn that you can refer to each
grid line by a numerical index.
2:57
Columns start at one,
from left to right by default.
3:02
And rows also begin at
one from top to bottom.
3:05
So here we have column lines one,
two and three, and row lines one,
3:09
two, three and four.
3:12
So now, we'll use line based placement to
control where the items sit on the grid.
3:15
Let's start with
the placement of the header.
3:21
We'll control how many
columns it should span.
3:23
Up until now, we've declared grid
properties in the grid container rule.
3:27
Well, the line placement properties
we're going to use next are declared
3:31
on the grid items.
3:35
So let's create a new rule that
targets the header element.
3:36
And we'll first use the grid
column start property,
3:41
to indicate the column grid
line where the header starts.
3:44
And grid-column-end, to set the column
grid line where the header ends.
3:52
So the grid-column-start value is
a number that indicates the grid line at
4:01
the left edge of a column.
4:05
The grid-column-end value indicates
the grid line that marks the right
4:08
edge of the column.
4:12
For example, the header currently
spans from grid line 1 to grid line 2,
4:13
which is equivalent to setting
grid-column-start to 1 and
4:19
grid-column-end to 2.
4:23
That's only part of the row however,
the header should take up the full row.
4:26
So setting grid-column-end to 3 means that
the header will stretch from the left
4:32
edge of the grid line, line 1 to the far
edge, line 3, filling up the entire row.
4:38
So now both main and aside
are auto-placed in the second row track,
4:45
and the footer in the third row track.
4:50
Next, we'll set the column
line placement for
4:52
the footer, because the footer should also
stretch across all three column lines
4:55
to fill up the row, and you just
learn how to do that with a header.
5:00
So let's go back to our style sheet,
target the footer, and
5:04
set grid-column-start to 1,
And grid-column-end to 3.
5:09
Next, I'll apply a 10 pixel
gutter between our column and
5:23
row tracks in the container
rule with grid-gap 10 pixels.
5:28
And the layout is complete.
5:37
Now, to stick the footer to
the bottom of the viewport,
5:39
I'll give the container
a viewport relative height,
5:44
with height 100vh.
5:47
Now, vh stands for viewport height and
5:52
100vh means 100% of
the current viewport height.
5:55
So then I'll set the second row track
6:00
to minmax 200 pixels, 1fr.
6:05
That way, it's going to expand
to fill up that free space but
6:11
not get any shorter than 200 pixels.
6:15
And as a result,
6:17
the footer will always remain stuck
to the bottom edge of the view port.
6:18
So now, with the grid placement
properties you learned,
6:25
your content can be freely arranged and
reordered within the grid.
6:28
For example, I'll change the layout by
setting footer to span only one column
6:32
from the start of line 2 to line 3.
6:37
And this places the footer
inside the second column track,
6:43
right below the aside.
6:47
So now we can have main fill up this empty
column track by spanning it two rows.
6:48
Back in my style sheet, I'll create a new
rule that targets the main element.
6:55
And this time, we'll use the
grid-row-start and grid-row-end properties
7:00
to indicate the main item start and
end positions on the row grid lines.
7:06
So first, we'll add grid-row-start
7:12
I'll set it to line 2.
7:18
And let's set grid-row-end to line 4.
7:21
So now the main element begins at
row line 2 and ends at row line 4.
7:29
You can see it better in Firefox Nightly,
here we have row line 2 and
7:34
then it stretches all
the way down to row line 4.
7:38
And from here, I can keep moving items
around and test different layouts.
7:41
For example, move the main element
back to just the second row track.
7:45
And then I'll remove the footer
properties to place it back
7:52
inside the first column track.
7:56
And this time,
we'll have the aside fill up
7:59
the empty column track
below by targeting aside,
8:03
And setting grid-row-start to 2.
8:11
And grid-row-end to line 4.
8:19
So again, in Firefox Nightly,
8:26
we can see that it stretches
from row line 2 to line 4.
8:29
Or we can quickly make
the aside even taller
8:34
by setting it to span all three rows.
8:37
From grid row one all
the way to line four.
8:39
So let's go back in our style sheet.
8:42
I'll quickly comment out
the header properties, and
8:44
in the aside rule,
I'll set grid-row-start to 1.
8:49
So in summary, when using
line-based placement properties,
8:57
grid-column-start and grid-row-start
specify the line where the item begins.
9:01
And grid-column-end and grid-row-end
specify the line where the item ends.
9:06
Coming up in the next video,
I'll teach you more line placement tips
9:12
including a shorthand syntax to
make your code more concise.
9:16