0:00 So far, we've seen how to position an element based on a line number, the column line numbers, and the row line numbers. That works, but if you prefer not to work with numbers, you can name the individual lines. I find this to be clunky if you have a lot of lines, but it can be useful.

0:16 Let's say if I was trying to set up a grid that had space for a header, a footer and some middle content, the body of our grid, for example. What I could do is first just define, let's say three rows to start. Instead of using repeat here, I'm going to set grid template rows to have a one fraction row, and then a four-fraction row, and then another one fraction row. Let's turn on the overlay.

0:51 Here's my first row, and then here's my second much bigger row, and then here's my third row. Now what we can do, if we want to, is provide custom names for the lines, in this case separating our rows. The same applies for columns. I'll only show rows just to keep it simple. As we already know, row and column lines are numbered by default.

1:12 This is row line one. This is line two. All the way down here is line three, and then line four. I set up a much larger row in the middle, and then two smaller rows on the top and the bottom. If instead I want them to have names, I can provide names. In this case, maybe it would make sense to call this the header start.

1:33 This is our main content here, so maybe the main content start. This is the footer here. We could call this the footer start. This way, I can then later position elements using those names. I'll show how we set the names. It's a little bit confusing when you first see it.

1:51 When we set up our rows or our columns, we use square brackets preceding a row value or a column value. Whatever I put here, we'll name the first line. I'm going to call it header start, because that's what it represents.

2:06 Now if I refresh, I open the dev tools, nothing's going to change. If I instead, in Chrome, select show line names, it's hard to see once again. It's small, but it says header start for this line right here. It also still has the number. I can refer to it as line one, row line one, or row line header start.

2:27 Then I'll call this one here my next line, same square brackets, I'll call this content start. The next line will be our footer start, and then the very last line will be the footer end. If I go back to show line names, it says header start, content start, footer start, and down here footer end.

2:57 I can use these lines, the names of these lines, to position let's say this red box. If I want this red box to be the footer content, I want it to start at footer start, all I have to do is select the red box, and then specify grid row start, or just grid row. Grid row start, and then the name of the line, which is footer start.

3:25 I don't use square brackets when I'm referencing the name of a line, only when I'm naming the lines originally. Now it goes down here. That's about all there is to it. I tend to not use this strategy because I'm fine using the line numbers, unless it gets really complicated. If it is really complicated, then it's also really annoying to name all of your lines individually.

3:50 There's another strategy that we'll talk about very soon that helps us position elements around in name specific areas rather than naming lines. Finally, I'm not going to show a columns example, but the same thing works with columns. If you set up your grid template columns, you can name the column lines and then position elements using the name of a line.

4:12 I can still use the number, by the way. This is line one, then we have line two, and this is line three. I could just say you start at line three, and it still works. If I told it to start at line two, it starts there and spans one track. Remember, we have three rows. The middle row is just much bigger.

4:32 You don't have to use the line numbers, you don't have to use the line names. You can decide what works best for you. This is the syntax to name your lines and then to recall the name of a line when you're positioning a specific element.