From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Naming grid lines

Naming grid lines - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents