From the course: CSS: Advanced Layouts with Grid
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Grid areas - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Grid areas
- [Narrator] If you thought named lines were useful, you're going to love grid areas. If you ask me, grid areas may be the most important feature of the CSS grid specification. And once you see how it works, I think you'll agree. Here's the elevator pitch. Using the grid template area property on the grid container, grid areas allow us to define rectangular areas spanning one or more cells within the grid, and give them names. Then we can use those names to place items within the grid using the grid area property on grid items. In other words, we turn the grid into a map, and place items on that map, which opens the door to all sorts of cool stuff. Let me show you how this works. In the exercise files for this movie, I've taken out all the stuff that we added in in the previous movies, and just simplified down to the standard grid we had before, and just these rules with nothing in them. As a result, our grid is back to the way it was before, where the items are autoplaced, and…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.