Position Items by Grid Lines

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 Mind 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 clear 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 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 asiding 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 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 columns start to 1 and 4:19 grid column and 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 place is 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