0:00 We've seen how to position elements using line numbers or the names of lines. Next, I'm going to introduce a much different way and, in my opinion, a much better way of moving elements around within a grid and positioning things exactly where you want.

0:15 Here, I've defined a simple grid that has three rows. A skinny top row, a large middle row, and a skinny bottom row, as you can see here, skinny, big, skinny. I'm using fractions, one, four and one fraction. Additionally, it has two columns. A big, four fraction column and then a small, one fraction column.

0:38 What I want to do here is imagine that I'm laying out a full web page. I want to have my main content in here, some sidebar here, and then I want a header or let's call it a navbar, going all the way across, including spanning this second column, and a footer that goes all the way across, spanning this column. I've laid out the underlying grid.

1:02 Right now, my elements are just flowing in. Six of them is what I've added in. They're filling the spots from left to right, top to bottom. I want to change that. I'm going to get rid of everything for now and just have my redbox and I wanted to span all the way across.

1:17 We know how to do that using line numbers or using the span keyword. I'll get rid of all the other boxes for now. This is what it looks like to start. Then what I can do is select that redbox and then I can set its grid-column, for example, to be span two.

1:35 Now, it spans two grid tracks. The first one, and the second one in the column direction. Then I've added in a blue box here. Let's imagine this is the footer of my page. We have our navbar or footer or main content. Our sidebar will go here with some ads.

1:52 To position the footer down there, I used line numbers. I gave each box an ID, redbox, bluebox. Not the most descriptive, but it works. Bluebox has a grid-row-start of three. Here's our first-row line, our second one, and the third one. It starts here and then it just goes one row, there's only one row left.

2:13 Then I set the column-start to span two, which I'm using the long version. I could also use a shorthand. It doesn't really matter here. I'm telling it to span two columns. It goes from this column into this column.

2:26 Now, let's add the sidebar in. For the sidebar, I'll use a greenbox. I just selected some colors that contrast a bit instead of red, orange, yellow. The original boxes were a little too similar.

2:37 Greenbox here, I've put it over in this slot as my sidebar. I could fill it with ads just as an example or side navigational content. To position it here, I need to have it start on the second column line. Here's the first column line, here's the second column line, and just go one track over.

2:59 Then also start on the second-row line. Here's the second row. That's what I've done as you can see here, grid-column-start: 2, grid-row-start: 2. That positions it as the sidebar.

3:12 Then, we have this piece here, which is our main content, and I'm going to use a yellowbox for that. Here's our yellowbox, it has an ID of yellowbox. Technically, without any styles, any specific grid styles, it still will just fill this gap in, as you can see here. I don't have any yellowbox styles. I've commented it out and it fills in this hole.

3:35 If I wanted to guarantee that it would always be in this exact spot and pin it to this track, I would need to set its row-start to be one and its column-start to be two, which is what I've done, right here. We won't see a difference, but there we are.

3:51 I did this, I did all the positioning here using line numbers. We could also use the line names that we talked about. Either way, this positioning style, it within a grid is all about using the lines.

4:03 Next, I'm going to show you how to position elements using areas that we can define. Not the lines, but the actual tracks. We can give them names. That's coming up.