In today’s quick tip I’ll show you five resources for mastering CSS Grid Layout. Let’s dive in!
A Quick Introduction to Grid
Grid Layout is arguably one of the most significant developments for web developers since the birth of CSS. It’s a layout system specifically for use with grid-based user interfaces, meaning that the standard “float” approach (something of a hack, let’s be honest) is no longer needed as a primary means of laying out a web page.
The first Working Draft was published in 2011, and, believe it or not, we have Microsoft to thank for much of its development; three of the initial four authors were part of the Microsoft team. That initial version is outdated now, having since been replaced by CSS Grid Layout Module Level 1.
5 Handy Resources
Browser support for Grid is already very promising, so it’s high time you became familiar with the syntax. Here are some great resources to kick you off.
Mozilla: Introduction to CSS Grid Layout
The first example comes from Mozilla. It’s introduction to CSS Grid Layout covers the basics, but also advanced concepts such as naming lines. It’s a thorough resource, but also beautifully presented with clear navigation, attractive graphics, and pens you can fork and play with.
learncssgrid.com
Another thorough resource is learncssgrid.com by Jonathan Suh. It explains the theory behind the syntax, whilst also showing examples of some of the most common layout patterns you might need.
CSS Tricks: A Complete Guide to Grid
Next up we head over to CSS Tricks for a great resource by Chris House (in the video I mistakenly credited Chris Coyier, apologies for that). The “Complete Guide to Grid” is exactly what you’d expect; very complete. It details properties for grid container and grid items in separate columns. Awesome work, as usual, from CSS Tricks.
Grid by Example
“Grid by Example” is developed and maintained by Rachel Andrew (herself a member of the working group for CSS Grid Layout) and has been around for quite some time. Besides the “get started guide”, which gives you all the essential information about the spec, it gives you lots of examples and “grab and go” patterns for the most common layouts.
CSS Grid Courses on Envato Tuts+
If you prefer learning by video, I strongly recommend (obviously!) you take a look at these courses by Craig Campbell. The first (3 CSS Grid Projects for Web Designers) walks you through three CSS Grid projects, with examples on Codepen for you to fork and practice on.
3 CSS Grid Projects for Web Designers
Craig’s most recent course (Bringing CSS Grid Layout and Flexbox Together) explains how you can use two of CSS’s most powerful layout modules (Grid and Flexbox) together.
Bringing CSS Grid Layout and Flexbox Together
Go Forth and Learn!
This quick roundup gives you a great start for learning CSS Grid. All the resources here include practical examples which you can use to dig in and reinforce the theory. I’ll leave you with a few more tutorials, but until next time–happy learning!