0:00 In addition to specifying the grid row start, the grid column start lines, we can also specify where an element should end within the grid. This only really matters if you want it to span more than one track. Everything we've done so far, this red box has filled exactly one grid track. This one or this one or this one, but we can actually have it span from here over to here, for example.

0:27 To do that, we first need to get it back to the top. I'm going to just get rid of the grid row start entirely. Now it just starts at the default, which is grid row line one. It starts in the column direction at column line two because of this property. Then it just spans one track. It ends at column line three.

0:50 If I want it to be double wide and take up two of these tracks, I can tell it where it should end, just like I told it where to start. This is column line four. The property we use is grid column end, and then I'll set that to four. There we go. It now spans two of those tracks.

1:12 Remember, the lines you see here are just from the dev tools. It doesn't actually look like that. This is what it looks like in the real world. Still, nothing remarkable, but it is a very important piece in understanding how the grid works.

1:23 As I've said a couple of times now, we define the underlying structure and then our content can fit in there nice and neat, but sometimes that content might be positioned in a very specific place. It might take up more than one of the columns or more than one row. We also have the equivalent property for grid row start, grid row end.

1:43 If I get rid of this for now, we go back to the default. If I want this red box to basically take up this whole left column here, start at row line one and I want it to end at row line four, we have a property grid row end. If I only set the end to be grid row end of four, it will end at that row line. By default, it's only going to take up one track.

2:11 If I set the start to be row line of one, which I can also do, grid row start will be line one. Now it starts at line one and it ends at line four. Another way of moving things around is by setting their ending line. I find it more intuitive to set the starting line, but both are perfectly valid.

2:31 Finally, let's do an example with rows and columns. I'll have it span in the column direction from one to three. Let's do that now. Grid column start, which the default is one, but I'm going to have it span multiple. I need to tell it, "I want you to go from one grid column, end will be three." Let's have it take up two by two. Let's move the grid row end up to line three right here.

3:04 There we go. Those four properties -- grid row start, grid row end, grid column start, grid column end -- can be used to move an individual element around within a predefined grid. I'm doing it with a three-by-three grid. Next, I'll show an example of a slightly larger grid.