Learn CSS Grid

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 built a website full of examples, that walk you through what Grid can do: gridbyexample.com/examples
  • She also created a series of free screencast tutorials that show off Grid: gridbyexample.com/video
  • She has started a gallery of common layouts you might want to use: gridbyexample.com/patterns
  • 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.)
  • Or learn from watching a full-length conference talk (or eight) of hers: find the most recent.
  • 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.
  • And then there’s the three years of work I’ve made, starting with my 2015 talk on layout design: Modern Layouts: Getting Out Of Our Ruts
  • My 2016 talk on layout design Revolutionize Your Page: Real Art Direction on the Web
  • My talk on using new CSS today, even when all the browsers don’t support it: Progressing Our Layouts
  • And my demos at: labs.jensimmons.com
  • How will we use CSS Grid, even when it’s not supported by 100% of browsers? By Using Feature Queries in CSS.
  • To really understand layout CSS, you should also learn about CSS Writing Modes
  • Chen Hui Jing wrote a fantastic article, on writing modes: with a amazing demo, and a talk.
  • Jing made a second amazing Writing Mode demo and wrote a great article about it. I don’t think it uses CSS Grid, but it shows the kind of thinking we’ll be using in the future.
  • While you are at it, follow Jing on Twitter, too: @hj_chen
  • Rachel also made a cheatsheet for the stuff you’ll need to look up the most: Box Alignment Cheatsheet
  • For many people, their first question about Grid is: why should I use this instead of Flexbox? Rachel answers that here: Should I use Grid or Flexbox?
  • She also answered the all important IE question — in this case: Should we try to use the old IE 10 & 11 implementation of Grid?
  • In fact, so many people are asking Rachel questions, she setup a GitHub repo as an AMA. So just go there and ask her more stuff / find more answers: CSS Grid Ask Me Anything
  • Belén Albeza wrote a relevant article about the things you might want to consider when deciding how to architect your project, You might not need a CSS framework
  • 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.