Learn CSS Grid

by Jen Simmons

February 27, 2017

People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:

Rachel also put together a polished course on all the CSS you need to know to hand-code layout: https://thecssworkshop.com It comes in two parts. You can buy access to Part 1, Part 2 (which includes Grid), or both. (If you are able, paying to access these videos is a great way to support all this work Rachel is doing for free. Also, you’ll fill in any gaps in your overall knowledge of layout. I certainly did. There was a bunch of stuff I didn’t know, and I didn’t know I didn’t know it.)

And as always, MDN has a detailed technical documentation on everything you want to know about CSS Grid including a well-written guide to the basic concepts. How’d we put together such a comprehensive expert set of documents? We hired Rachel to write them.

Be sure to try out the Grid Inspector Tool that is baked into Firefox. It’s very hard to code a Grid layout without being able to see your lines. My colleagues at Mozilla and I are aiming to give you a tool that makes it easy to develop and design Grid Layouts in the browser. Many more features have been planned, and will appear over next the year. Contact me with any ideas, requests, comments on how the tool is working out for you. Such feedback — praise and critique — helps tremendously in wrangling resources to take things to the next level.

Want a quick way to start messing with CSS Grid right now, without having to find a place to write code? Try CSS Grid Playground

There will be much more coming from Rachel, Jing and me this year.

I am starting to see a bunch of simple introductions, link-baity false-narratives, and weirdly-wrong ideas to creep into the conversation about CSS Grid. They are not as helpful. Frequently they are actually wrong. Let’s please share the best work with each other — not exclusively work done by men because it seems more respectable / more authoritative / more bro-awesome! And especially, let’s not pass around the work published by people who simply copied Rachel’s work, badly, with mistakes. In 2017, I have no more patience for these shenanigans. So far, most of the people I’ve seen learning, teaching and evangelizing CSS Grid are women. If suddenly we all “disappear”, and a bunch of men get all the attention, my head might explode.

If you see any new resources that are good, do let me know! I want to feature the most helpful work out there. Once you start learning CSS Grid, share what you’ve discovered. Explain things in a new way that feels helpful. Make demos unlike anything we’ve seen before. Credit the sources that taught and inspired you. Reference the larger conversation. There is a lot to learn. A lot for us to discover. A lot to invent. This truly is a revolution in graphic design on the web. There’s no time, and no reason to be all jockeying for the same worn-out boring territory, trying to make the people — the women — who got there first invisible.