From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Named lines

Named lines - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Named lines

“

- Using the gridline numbers to place items on the grid, works fine but it's a really abstract way of approaching layouts, if you think about it. When you look at this layout, you're not thinking line one, line two, line three and line four. You're probably thinking something like, this is the main area, and then over here we have a side bar area and then there's a footer area on the bottom. And you want to use that kind of terminology when you create your CSS. Good news is, you can. There are two different approaches to this, we will cover those in this movie and the next one. The first approach is to name the lines and there are several things you can do here, so let me explain how this works. You'll remember from when we declared the grid itself up here in the site rule, we said grid template columns and then defined the space between each of the lines, so if you imagine, you can see there's a line here, in front of two fr and there's a line after two fr, there's a line after the 1…

Contents