0:00 Next, we're going to talk about positioning elements within a grid. So far, we really haven't done much. We've defined a grid. We've added a bunch of elements inside of our grid container. They just flow into the individual grid tracks, right? If I get rid of all of our boxes and I have this three-by-three grid, we don't see anything.

0:19 If I open the DevTools, we know that there's these grid tracks that have been defined as you can see there. We have each individual slot or track in the grid, and then of course, the lines separating them. That's what I want to focus on in this video, the lines. Unfortunately, there's no way in the DevTools to make these lines bigger.

0:39 I can try and zoom in. The text size doesn't actually grow I'll try and zoom in post-production. What you'll see here is that there's a number. This is just from the developer tools. The number one right here corresponds to this line. The number two corresponds to this column line. Three is this line and four is this line here.

1:01 The same goes for the rows. This is row line one, the top of the container, row line two, row line three, and row line four. Now, why does this matter? Soon I'm going to show you how we can position elements based on these lines. Let's say, I just had a single element or two elements in here to start...Let me uncomment this. Let's go with two boxes.

1:29 Let's start by asking where are these boxes going to show up in that grid. There's nine slots, nine tracks, two boxes. They fill from left to right, top to bottom. Those first two grid tracks -- let me turn this back on -- are filled. However, I can instead move them around if I want.

1:48 The grid itself is separate from the content, which means I could, using the right properties, move this red box to this grid track and move this orange one to this grid track, the bottom left corner. By default, they're just going to fill from top to bottom, left to right, as we've seen. I can move them around.

2:07 One way of doing that is by using the numbers on these grid lines. That's what I'll show you in the next video.