0:00 As we just learned, when we define a grid, every column line and every row line has a corresponding number that's automatically generated, starting at one. Now I'm going to show you how we can move elements around using those row and column lines. I'm going to streamline things even further. Let's work with just a single box.

0:21 As we know, it will just start in the top left corner. Let's turn on the overlay again. Maybe I want it to move over here to start. The first row, but the third column. What I need to do is take note of this grid line. This is the third column line. I can actually tell it, "I want you to start at the third column line."

0:43 We have a property called grid-column-start, which unlike every other property we've seen so far does not apply to the container. This is our container that has the grid in it. Rather, it applies to the individual grid element, the child or children of the container. Instead of doing it to all boxes, I'm going to give this one an ID of, I don't know, red box.

1:08 This will just allow me to specifically select red box. If I set the grid-column-start to one, we're not going to see anything different. I just told it, "I want you to start at the first column line," but it already does that. If I instead set it to the number two, now it starts at this number two column line. If I instead set it to number three, now it's in this top right grid track.

1:39 All I did was tell it which numbered column line I wanted to start at. I know they're faint here with the DevTools, but this is column line one, two, and finally three.