Positioning Elements by Lines 5 exercises

Specify the Column Start Position

Let's look at how to move elements around using row and column lines in a grid.

We'll start by working with just a single box. By default, it will be placed in the top-left corner of the grid.


Loading lesson


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.