Negative Grid Lines and Shorthand Syntax4:20 with Guil Hernandez
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.
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 two 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 road 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 up