Join Morten Rand-Hendriksen for an in-depth discussion in this video What is CSS Grid?, part of CSS Grid First Look.
- [Voiceover] First things first, what is the CSS Grid layout module and why does it matter? To explain this, let's look at how we've dealt with layouts on the web up until this point. In the very beginning, we had no layout tools, and the only thing we could do was change text alignments. Then we got table-based layouts, and we used tables and one square pixel transparent spacer GIFs to create fancy layouts. It worked, but it was a big, ugly, impractical, and inaccessible mess. New tools came online, including frames and layers, and then we got Cascading Style Sheets with floats, clears, and positioning.
This allowed us to separate content from presentation for the first time and also gave us some semblance of layout control because we could sizes, positioning, and negative margins to come up with convoluted ways of getting the layouts we wanted. And this still is kind of where we are right now. One, to make a responsive two or three-column layout, you have to use floats, clears, and widths, and some clever math to do it, which is pretty ridiculous if you ask me. Now, of course, there is the new CSS flexible box layout module, or flexbox, which allows us to create horizontal, flexible layouts.
And, yes, flexbox, is a huge step forward, but it's still not a real layout tool. Why can't we simply say, "Hey, box, go over in the top right-hand corner "when the viewport is wide enough"? Well, with CSS Grid, we can. According to the W3C working draft, CSS Grid "defines two-dimensional grid-based layout system, "optimized for user interface design. "In the grid layout module, "the children of a grid container can be positioned "into arbitrary slots in a flexible "or fixed predefined layout grid." Or, in plain English, CSS Grid lets you draw a grid inside any container and place content wherever you want within that grid.
In short, CSS Grid gives us the power of classic print-based grid layout systems with the flexibility of responsive web design. To say that's revolutionary is a serious understatement.
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