1 00:00:00,500 --> 00:00:04,540 In this video, I'll teach you more line placement tips, and a shorthand syntax for 2 00:00:04,540 --> 00:00:06,980 positioning items by line number. 3 00:00:06,980 --> 00:00:12,450 Grid lines also have negative indexes, you can reference grid lines starting 4 00:00:12,450 --> 00:00:16,760 from the far right, or bottom edges, of the grid using negative line numbers. 5 00:00:16,760 --> 00:00:21,520 Column lines are indexed, from the far right line, starting at -1, and 6 00:00:21,520 --> 00:00:25,080 row lines, from the bottom most line, starting at -1. 7 00:00:25,080 --> 00:00:27,670 Being able to reference the start and 8 00:00:27,670 --> 00:00:31,300 end grid lines comes in handy when you need to stretch an item across the grid. 9 00:00:31,300 --> 00:00:33,480 For example, you can stretch a grid item, 10 00:00:33,480 --> 00:00:38,040 like the header, from the left edge of the grid, to the farthest edge, 11 00:00:38,040 --> 00:00:43,660 regardless of the number of grid lines, by giving it a grid-column-end value of -1. 12 00:00:43,660 --> 00:00:48,490 So back in my style sheet I'll uncomment the header properties and 13 00:00:48,490 --> 00:00:53,589 replace grid-column-end: 3, with grid-column-end: -1. 14 00:00:53,589 --> 00:00:57,207 Now although I could have just stuck with a value three here, what if I later 15 00:00:57,207 --> 00:01:01,510 changed the number of column tracks, which then changes the number of grid lines? 16 00:01:01,510 --> 00:01:04,180 I'd have to change that three to something else. 17 00:01:04,180 --> 00:01:08,670 But the negative one value means that the header will always stretch across the row, 18 00:01:08,670 --> 00:01:11,490 regardless of the number of grid lines. 19 00:01:11,490 --> 00:01:16,881 Similarly, you can stretch the aside from row grid line 2, 20 00:01:16,881 --> 00:01:19,840 down to the bottom most row line, 21 00:01:19,840 --> 00:01:24,930 in this case line 4 by setting a grid-row-end: -1. 22 00:01:27,190 --> 00:01:31,720 So we see that the header stretches from column line one, 23 00:01:31,720 --> 00:01:36,250 all the way to column line three, and aside from row line two, 24 00:01:36,250 --> 00:01:41,300 all the way down to the bottom most row line, in this case, line four. 25 00:01:41,300 --> 00:01:44,428 By setting the end value to -1, 26 00:01:44,428 --> 00:01:50,349 even if you add more row tracks to the container, for example, 27 00:01:50,349 --> 00:01:55,731 100 px, the aside will stretch to fill the new space. 28 00:01:55,731 --> 00:01:59,249 Now, most of the time, you're just going to use negative one, 29 00:01:59,249 --> 00:02:02,506 to stretch items from one edge of the grid to the other, but 30 00:02:02,506 --> 00:02:06,874 you can also place other items on the grid with negative line numbers by counting 31 00:02:06,874 --> 00:02:09,670 backwards from the negative one start index. 32 00:02:09,670 --> 00:02:14,290 For example, let's have the footer fill up this empty space here. 33 00:02:14,290 --> 00:02:18,020 Well the footer currently starts at row line three, so 34 00:02:18,020 --> 00:02:23,360 counting back from negative one, negative two, negative three, 35 00:02:23,360 --> 00:02:27,580 we see that row, line three has a negative index of negative three. 36 00:02:28,620 --> 00:02:33,884 So we'll place the footer at the start of -3, 37 00:02:33,884 --> 00:02:37,965 with grid-row-start: -3, and 38 00:02:37,965 --> 00:02:44,296 stretch it to end at -1, with grid-row-end: -1. 39 00:02:48,873 --> 00:02:53,021 And there you have it, and just like the aside, 40 00:02:53,021 --> 00:02:58,518 even if you add an extra row track, for example, 50 pixels, 41 00:02:58,518 --> 00:03:03,316 the footer remains fixed to the bottom most grid line. 42 00:03:03,316 --> 00:03:05,752 Go ahead and undo that extra grid track. 43 00:03:05,752 --> 00:03:10,064 Next, these placement properties also have a shorthand syntax that 44 00:03:10,064 --> 00:03:14,420 let you declare the start and end values with just one property. 45 00:03:14,420 --> 00:03:19,330 For example, grid-column-start, and grid-column-end, 46 00:03:19,330 --> 00:03:23,420 can be combined into just grid-column. 47 00:03:23,420 --> 00:03:28,720 Now the shorthand property accepts two values, the first value is the start line, 48 00:03:29,920 --> 00:03:33,510 then you type a forward slash, and follow it with the end line. 49 00:03:33,510 --> 00:03:35,295 In this case, it's -1. 50 00:03:37,140 --> 00:03:41,433 The properties grid-row-start, and grid-row-end, 51 00:03:41,433 --> 00:03:44,190 can be combined into just grid-row. 52 00:03:45,910 --> 00:03:50,040 I'll write the start value 2 / 3. 53 00:03:50,040 --> 00:03:54,919 Now I'll stop here, but why don't you change the rest of the placement 54 00:03:54,919 --> 00:03:57,537 properties to the shorthand syntax. 55 00:03:59,230 --> 00:04:01,979 There are yet even more ways to place items on 56 00:04:01,979 --> 00:04:06,400 the grid in addition to specifying the start and end line numbers. 57 00:04:06,400 --> 00:04:10,600 For example, you can use the span keyword, even name your grid lines, and 58 00:04:10,600 --> 00:04:13,130 reference the names instead of numbers. 59 00:04:13,130 --> 00:04:17,310 I've posted resources and examples of using the span keyword, and 60 00:04:17,310 --> 00:04:19,760 named grid lines, in the teacher's notes for this video.