You've seen how we can create grid tracks to layout grid items,

however CSS 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 because you can specify on which line a grid item starts and

ends, and how many tracks it should expand.

Mind based placement makes it possible to build your entire page using grid layout.

So in this video, we're going to create this common web page layout,

consisting of a header, main, aside, footer area using line based placement.

Be sure to launch the New Workspace with this video or

download the project files to follow along.

In the workspace, the file index.html contains a div with a class container and

nested inside are header, main, aside, and footer elements.

The container div is our grid container and its children are grid items.

Open a file grid.css and the first thing we'll do is to clear

the grid by writing display grid inside the container rule.

Next, we'll create row and column tracks.

Let's create two flexible column tracks with grid-template-columns.

We'll set the first column track to 2fr, and the second to 1fr.

And we need to define three row tracks, one row for the header, another for

the main and aside content, and one for the footer.

So we'll grid-template-rows, And

set the tracks to 100 pixels, 350 pixels, and 100 pixels.

I'll preview the workspace and we can see that the four grid items are laid out

according to the grid default auto placement rules.

We set two column tracks, so

the header and main elements are placed on the first row and

the asiding footer get placed on the second row track set to 350 pixels.

Now the third row track is empty for now, we'll place the footer inside it soon.

We set the first column track to 2fr, so the header and

aside are taking up two fractions of the available space, while the main and

footer items are taking up one fraction.

I'll switch over to Firefox Nightly, and when I turn on the grid inspector,

you'll see that the two column, three row grid we've set up consists of three

column grid lines and four row grid lines.

Remember, the numbers refer to the lines and not the actual columns and rows.

So even though there are just two columns, we have three line numbers.

That's also true for the rows.

You learn that you can refer to each grid line by a numerical index.

Columns start at one, from left to right by default.

And rows also begin at one from top to bottom.

So here we have column lines one, two and three, and row lines one,

two, three and four.

So now, we'll use line based placement to control where the items sit on the grid.

Let's start with the placement of the header.

We'll control how many columns it should span.

Up until now, we've declared grid properties in the grid container rule.

Well, the line placement properties we're going to use next are declared

on the grid items.

So let's create a new rule that targets the header element.

And we'll first use the grid column start property,

to indicate the column grid line where the header starts.

And grid column end, to set the column grid line where the header ends.

So the grid column start value is a number that indicates the grid line at

the left edge of a column.

The grid column end value indicates the grid line that marks the right

edge of the column.

For example, the header currently spans from grid line 1 to grid line 2,

which is equivalent to setting grid columns start to 1 and

grid column and to 2.

That's only part of the row however, the header should take up the full row.

So setting grid column end to 3 means that the header will stretch from the left

edge of the grid line, line 1 to the far edge, line 3, filling up the entire row.

So now both main and aside are auto-placed in the second row track,

and the footer in the third row track.

Next, we'll set the column line placement for

the footer, because the footer should also stretch across all three column lines

to fill up the row, and you just learn how to do that with a header.

So let's go back to our style sheet, target the footer, and

set grid-column-start to 1, And grid-column-end to 3.

Next, I'll apply a 10 pixel gutter between our column and

row tracks in the container rule with grid gap 10 pixels.

And the layout is complete.

Now, to stick the footer to the bottom of the viewport,

I'll give the container a viewport relative height,

with height 100vh.

Now, vh stands for viewport height and

100vh means 100% of the current viewport height.

So then I'll set the second row track

to minmax 200 pixels, 1fr.

That way, it's going to expand to fill up that free space but

not get any shorter than 200 pixels.

And as a result,

the footer will always remain stuck to the bottom edge of the view port.

So now, with the grid placement properties you learned,

your content can be freely arranged and reordered within the grid.

For example, I'll change the layout by setting footer to span only one column

from the start of line 2 to line 3.

And this place is the footer inside the second column track,

right below the aside.

So now we can have main fill up this empty column track by spanning it two rows.

Back in my style sheet, I'll create a new rule that targets the main element.

And this time, we'll use the grid-row-start and grid-row-end properties

to indicate the main item start and end positions on the row grid lines.

So first, we'll add grid-row-start

I'll set it to line 2.

And let's set grid-row-end to line 4.

So now the main element begins at row line 2 and ends at row line 4.

You can see it better in Firefox Nightly, here we have row line 2 and

then it stretches all the way down to row line 4.

And from here, I can keep moving items around and test different layouts.

For example, move the main element back to just the second row track.

And then I'll remove the footer properties to place it back

inside the first column track.

And this time, we'll have the aside fill up

the empty column track below by targeting aside,

And setting grid-row-start to 2.

And grid-row-end to line 4.

So again, in Firefox Nightly,

we can see that it stretches from row line 2 to line 4.

Or we can quickly make the aside even taller

by setting it to span all three rows.

From grid row one all the way to line four.

So let's go back in our style sheet.

I'll quickly comment out the header properties, and

in the aside rule, I'll set grid-row-start to 1.

So in summary, when using line-based placement properties,

grid-column-start and grid-row-start specify the line where the item begins.

And grid-column-end and grid-row-end specify the line where the item ends.

Coming up in the next video, I'll teach you more line placement tips

including a shorthand syntax to make your code more concise.