From the course: CSS: Advanced Layouts with Grid
Unlock this course with a free trial
Join today to access over 24,500 courses taught by industry experts.
Grid areas - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Grid areas
- It's great that we can use grid line numbers to place items exactly where we want on the grid, but these numbers aren't always the easiest to work with. For starters, it can be difficult to keep track of where various lines are on the grid. Really, it's not an intuitive approach to creating layouts. For instance, when you look at a layout, you're not thinking line one, two, three, et cetera. You're probably thinking more along the lines of, this is the header up top. I want my main content here to span a couple of rows. I've got my masthead, my sidebar, and then down here I've got my footer. CSS grid solves for this by giving us two methods for placing items on the grid by name, instead of line number. We'll cover the first in this movie and another in the next. The first method is grid-template-areas. The short version of it works like this, using the grid-template-areas property, on the grid container, we can use grid areas to define rectangular areas that span one or more cells…