0:00 Let's begin with the pink box. Here's what we have right now. I need to extend it so it spans four rows. One, two, three, four. I'm happy with where it's starting. What I could do, the simplest option is just to do this. Grid, and then we were working with the row direction. Grid-row-end, and I could say span 4. There we go.

0:27 I could also do it with grid-row-start and have it span 4. Or I could just work with grid-row and have it span 4.

0:37 The only trouble here is that technically it's not rooted to this exact location. It just happens to be inserted into the grid in this location. I know I said we don't need to touch the HTML, but if I happen to reorder this for example, or have two purple boxes...Now this pink box still spans four rows, but it's not in the correct position where I wanted it to be.

1:04 Instead of relying on the just implicit location, the natural place where it falls into the flow, I can get specific and say I want you to start at row 1 and span 4. That still is only for the row direction.

1:18 For the column direction, I can say grid. You might think this is unnecessary because it's fine where it is. This is where we want it. If we want to be very specific and make sure it's always right here, I want it to start at line 1 and end at line 2.

1:36 This way, no matter how much content is in here, if I have a whole bunch of purple boxes, it always stays right there. If instead I hadn't rooted the column correctly, and hadn't mentioned the grid-row-start, now take a look at where it goes. That's just a little detour, but always good to be specific. Let's get rid of all those extra purple boxes.

2:01 Now we need to work on moving our purple box down to the right spot. Notice it spans across two columns and spans three rows. Let's start with the row direction.

2:13 If we look at the row lines, we have one, two, three. I'm going to want it to start on grid row line three. I'll use the shorthand, grid-row. I'll start on 3. Then I want it to finish three, four, five, six. I don't want to use the lines. The point of this exercise is to use span. I'm going to tell it to span 3. Start on line 3 and span 3. That's what we see.

2:39 Now I just need to move it over in the column direction. I want the column start to be line one, two, three, four. Grid-column. I want it to start on line 4. Then it needs to span 2 columns. There we go. I could have also said go from 4 to line 6, but that was not the point of the exercise. I wanted us to use the span keyword, so that works.

3:06 Same thing for grid-column up here. I guess I could say span 1, although I pretty much never do that. I would just prefer to put the line number because it's easy to go from 1 to 2. Going from 1 and spanning 4, you have to do a bit of counting to replace it with line 5. Which is not hard, but I like to use the span keyword a lot of the time.

3:28 That is it for this exercise. You could have done it with grid-row-start, grid-row-end, grid-column-start, grid-column-end, and so on. Or grid-row and grid-column as the shorthand.