Join Morten Rand-Hendriksen for an in-depth discussion in this video How to use template areas, part of CSS Grid: First Look.
- View Offline
- [Voiceover] Template areas make more sense…when you see them in practice.…Here I'll start by making a four column grid…with 10 pixel gutters rather than our previous…12 column grid with 23 defined lines.…You'll see why in a second.…I'll also set the grid template rows to auto.…The reason why will become apparent in a second as well.…Okay, time to map out my grid template areas.…In our grid, we have seven actual columns.…Four columns and three gutters…so each line must have seven items on it.…I start by defining grid-template-areas:…and then I'm gonna go down to a second line here…so they can map it all out.…
The first line will be all header…so here inside quotation marks…I'm gonna spell out seven times header.…That means each of the columns…on the first row will be assigned the name header.…Then, I'll map out the second row…and here the first column is "sidebarleft".…The second is a gutter so a punctuation mark.…The third, fourth and fifth are all content.…Then another gutter, punctuation mark…and finally sidebarright.…
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout