Join Morten Rand-Hendriksen for an in-depth discussion in this video Set up a CSS grid, part of CSS Grid First Look.
- [Voiceover] To create a CSS grid, we first…have to find the container that holds the elements…we want to lay out and set its display property to grid.…In the playground, that container is the section…with a class the grid.…So to create a grid we go to style-grid.css…and create a new rule for that section…and set its display property to grid.…When I now reload the browser,…you'll see the colored bars snap over to the left…but they don't display as a grid.…
Inspecting the element reveals that the grid still takes up…the same space as the block level element would…and it's trying to do something with the containing elements…but it doesn't know what to do.…So it just lists them out based on their intrinsic size.…If I go on here and edit one of these elements,…you'll see what I'm talking about.…So right now it says box one and you can see the width here…is set by the width of the words box one.…So if I change that to something else,…let's say box one is the first box and…then click in the page, you'll see…that the width of the content here expanded…
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