Naming grid lines

- [Instructor] You can name the lines that are in-between the grid cells and then use those line names to position your grid items. You do that when using grid template columns or grid template rows to define the columns or the rows by putting the lines names in square brackets in-between the columns or rows. For example, in my code over here, I already have two columns set up. And I'm gonna start out by adding names right there in that declaration, which is on line 12. Before the first column, I'm gonna do square bracket, start, closing square bracket, and then a space to name the first line.

Between those two columns, square bracket, middle, space, and then after the last one, before our semicolon, have square bracket and end. Well unfortunately, unlike grid template areas, you can't see your line names using DevTools. There's really no way to know where your line names are ending up. You just have to be extra careful to keep track of what you're doing. You don't have to name every line. You can have multiple columns between the line names. For example, between start and middle, I could add another column that's 100 pixels.

And then between middle and end, I could change this 100 pixels and have it be repeat, and then two, comma, one f r. Save, go over here, and now we have four columns. A common way to use this in an actual layout would be to name the sections of your layout. For example, between your start and your end, perhaps I would have a column that's one f r, the next line could be called content start, and then repeat, and then three comma one f r to add three more columns.

And then, content end can be the next line. One f r for the last column. Go over here and refresh. So now I have five columns, one, and then three repeats, and then a one. If you wanna give any line more than one name, you can do that by separating the names with a space, similar to how you can give an element multiple class names. This start, inside the same square brackets, I could also call it sidebar start and then space start, all inside this same square bracket.

So that gives those two names to the same line. Then to position grid items, all I would do is do a style for my item. So, dot item three, and then my styles would be grid column, and I could start at the content start line, and then a slash. And then end at the content end line. Save, go over here and refresh. Now I have item three going from the line that's content start to the line that's content end.