Visual Cheatsheet: CSS Grid Layout

CSS Grid Layout is going to be here sooner than you think. It’s currently available in the latest Chrome, Firefox, and Safari, and when IE support finally lands, it will be an indispensable new tool. Grid Layout is similar to Flexbox in a lot of ways, so much so that it can be a bit confusing why you would use one over the other.

The biggest difference between Flexbox and Grid Layout is that Flexbox really only tackles a single dimension (either a row or a column) well, while Grid Layout can arrange elements in both rows and columns in very sophisticated ways.

After building my Flexbox Visual Cheatsheet, I knew how useful that process was in helping me understand the available properties, so I went ahead and created a CSS Grid Layout Visual Cheatsheet as well. Once again, it really helped me wrap my mind around the options.

Note: Make sure you have the latest version of a browser that supports CSS Grid Layout.

Visual Cheatsheet for CSS Grid Layout