Join Morten Rand-Hendriksen for an in-depth discussion in this video How to place content using named lines, part of CSS Grid: First Look.
- View Offline
- [Voiceover] Okay, so how do named lines work in practice?…Well, first we have to name the lines themselves,…and this means we have to refactor…the simple math-based line setup we created previously.…Here I have to think about…how I want to access the lines later,…and use math where I can to make the code…less impossible to read.…So let's just look back at what we want to do.…I have a 12-column layout with 11 gutters in-between,…and the header and footer in my layout…is going to span the full width of all the columns.…The two sidebars on the left and right…are each going to span two columns and one gutter.…
Then there's going to be one gutter separation…between the main content and the sidebars.…And the main content spans eight columns and seven gutters.…I also want to insert gutters between the header,…this main content area, and the footer.…This means I need to name each of the lines…that I'm going to target.…I'm not going to name all the lines in the layout;…just the lines I want to refer to…as I'm laying out my content.…
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