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
Grid lines also have negative indexes. You can reference grid lines starting from the far right or bottom edges of the grid, using negative line numbers. In this video, you'll more line placement tips and a shorthand syntax for positioning items by line number.
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
In this video, I'll teach you more line
placement tips, and a shorthand syntax for
0:00
positioning items by line number.
0:04
Grid lines also have negative indexes,
you can reference grid lines starting
0:06
from the far right, or bottom edges,
of the grid using negative line numbers.
0:12
Column lines are indexed, from the far
right line, starting at -1, and
0:16
row lines, from the bottom most line,
starting at -1.
0:21
Being able to reference the start and
0:25
end grid lines comes in handy when you
need to stretch an item across the grid.
0:27
For example, you can stretch a grid item,
0:31
like the header, from the left edge
of the grid, to the farthest edge,
0:33
regardless of the number of grid lines, by
giving it a grid-column-end value of -1.
0:38
So back in my style sheet I'll
uncomment the header properties and
0:43
replace grid-column-end: 3,
with grid-column-end: -1.
0:48
Now although I could have just stuck
with a value three here, what if I later
0:53
changed the number of column tracks, which
then changes the number of grid lines?
0:57
I'd have to change that
three to something else.
1:01
But the negative one value means that the
header will always stretch across the row,
1:04
regardless of the number of grid lines.
1:08
Similarly, you can stretch
the aside from row grid line 2,
1:11
down to the bottom most row line,
1:16
in this case line 4 by
setting a grid-row-end: -1.
1:19
So we see that the header
stretches from column line one,
1:27
all the way to column line three,
and aside from row line two,
1:31
all the way down to the bottom most
row line, in this case, line four.
1:36
By setting the end value to -1,
1:41
even if you add more row tracks
to the container, for example,
1:44
100 px, the aside will stretch
to fill the new space.
1:50
Now, most of the time,
you're just going to use negative one,
1:55
to stretch items from one edge
of the grid to the other, but
1:59
you can also place other items on the grid
with negative line numbers by counting
2:02
backwards from the negative
one start index.
2:06
For example, let's have the footer
fill up this empty space here.
2:09
Well the footer currently
starts at row line three, so
2:14
counting back from negative one,
negative two, negative three,
2:18
we see that row, line three has
a negative index of negative three.
2:23
So we'll place the footer
at the start of -3,
2:28
with grid-row-start: -3, and
2:33
stretch it to end at -1,
with grid-row-end: -1.
2:37
And there you have it,
and just like the aside,
2:48
even if you add an extra row track,
for example, 50 pixels,
2:53
the footer remains fixed to
the bottom most grid line.
2:58
Go ahead and undo that extra grid track.
3:03
Next, these placement properties
also have a shorthand syntax that
3:05
let you declare the start and
end values with just one property.
3:10
For example, grid-column-start,
and grid-column-end,
3:14
can be combined into just grid-column.
3:19
Now the shorthand property accepts two
values, the first value is the start line,
3:23
then you type a forward slash,
and follow it with the end line.
3:29
In this case, it's -1.
3:33
The properties grid-row-start,
and grid-row-end,
3:37
can be combined into just grid-row.
3:41
I'll write the start value 2 / 3.
3:45
Now I'll stop here, but why don't
you change the rest of the placement
3:50
properties to the shorthand syntax.
3:54
There are yet
even more ways to place items on
3:59
the grid in addition to specifying
the start and end line numbers.
4:01
For example, you can use the span keyword,
even name your grid lines, and
4:06
reference the names instead of numbers.
4:10
I've posted resources and
examples of using the span keyword, and
4:13
named grid lines,
in the teacher's notes for this video.
4:17
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