Join Morten Rand-Hendriksen for an in-depth discussion in this video A word on gutters, part of CSS Grid: First Look.
- View Offline
- [Voiceover] When I introduced you to the new terminology…surrounding the CSS Grid layout module, I mentioned gutters…and said they are still highly experimental.…Before we move on it's necessary…to address this in a bit more detail…because though they don't currently work…in standard browser implementations,…there's a good chance gutters…or column and row gaps as they are called,…will become part of the final specification.…And we can see them at work…in Chrome's development browser called Chrome Canary.…Column and row gaps have their own properties…grid column gap and grid row gap…that each take one length value in any fixed length unit…meaning pixel, em, rem etcetera.…
Percentage and the fr unit…do not work with these properties.…Let me jump over to Chrome Canary for a second…to show you how this works.…If you want to do the same, install Chrome Canary,…go to the flags and enable…experimental web platform features,…restart the browser and you'll get access to CSS Grid…in this experimental browser.…Chrome and Chrome Canary are two separate browsers…
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