Join Morten Rand-Hendriksen for an in-depth discussion in this video Custom grid areas, part of CSS Grid: First Look.
- [Voiceover] Named lines are all well and good,…but they're not the only way we can simplify…the process of creating layouts in our grid.…We also have something called Grid Template Areas.…And they approach the problem in a totally different way…that quite frankly is unlike anything I've ever seen…in CSS before.…In a simplified example of a classic grid with gutters,…what we do with Grid Template Areas…is explicitly define for the browser…what different areas are named.…This is done using something I can only equate to…old school ASCII art.…Here's how it works.…First, we set up our columns and rows.…
In this case, I'm making four columns…with 10 pixel gutters in between.…And setting rows to auto…so the browser gives us whatever rows the content requires.…Next, we map out what will occupy the cells in the grid.…This is the ASCII art part.…For each row, I list out what will appear in each column.…For the header it's easy.…All seven columns,…so both columns and gutters,…hold the header.…So, header, header, header, header…
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