0:00 This is probably no surprise, just like we have a grid-column-start, we also have a grid-row-start. I can use that property to move an individual grid item. Not the container. Not the grid parent, but the individual elements. In our case, one red box. I can have it start at a different row number.

0:18 Right now, it's starting at row line one, which is the default of course. I could move it down to row line two or row line three. Let's do that. It's just a matter of grid-row-start. Then I'll set it to the number two, which is our second-row line. This is the first one. This is the second.

0:40 How would I move it all the way down, let's say, to this middle bottom grid track right here? Why don't we start with the column line? Which column line is that? This is line one. This is line two. I'm going to move it to the second column line. Then I need to move it down so that it starts not on the first-row line, not on the second, but on the third.

1:06 Grid-row-start three. There we are. That is all there is to using grid-row-start. Just like grid-column-start, we can provide a number for any of the corresponding numbered column and row lines. This is a property we apply to an individual child, an element in the grid, not the overall grid.

1:26 It's a two-step process. We define the grid structure. Then we place elements in there. In this case, I'm very deliberately placing my elements. We've also seen that we can just have our elements flow into the grid. We'll talk more about that soon.