The Firefox Grid Inspector, July 2017 edition

by Jen Simmons

July 26, 2017

I’m working on a lot of different projects these days, but one of my favorites is the Firefox CSS Grid Inspector.

I first started learning CSS Grid without a tool for seeing what’s going on. It can be tough to understand why things aren’t working they way you expect. Grid is much easier to learn when you can see the lines. We shipped the original version over a year ago, as an Add-on for Firefox.

As an extension, CSS Grid Inspector “version 0” was limited in what it could do. It didn’t always line up with where it should have. (To make a tool that works accurately in all use-cases, especially crazy edge-cases, it needs to be directly integrated with the browser’s rendering engine. No extension can do that.)

Really, the main job of the Firefox Grid Inspector version 0 was to prove that such a tool is useful and would be popular. And it did so very successfully. Along the way, we gathered lots of feedback from designers and developers who were also learning Grid — thank you to everyone who chimed in, especially Eric Meyer and the CSS Layout Club NYC. This tool is much better because of you.

That early experience gave us the momentum to ship version 1, baked straight into the Firefox Dev Tools, in the first week of March 2017. We were proud to ship developer tools when we shipped CSS Grid itself, on day one. Our CSS rendering engine team created an API for Grid, to which our Dev Tools team connected the new tools. And we got it into your hands, so you could use it to learn and to code layouts with this amazing new specification, CSS Grid.

Firefox Grid Inspector version 1 offers one thing — the ability to see your grid lines. It’s the tool you’ll find in the regular version of Firefox today.

Since March, a ever-growing cross-department team has been working hard on version 2. They declared it finished-enough to ship in Firefox Nightly (without a flag) in late June. I’m excited to finally be able to show it to you. We’ve added a lot.

Watch this video for a 10-minute introduction into how the mid-July version of the Firefox Grid Inspector works, and how you can use it to write layout CSS.

Download Firefox Nightly (if you don’t have it already) to get access to the latest and greatest. In fact, things are moving so fast, this video is already slightly out of date. (“Display grid areas” has been renamed “Display area names”, and the list of options has been reordered.) Things will keep changing. The regular version of Firefox will get these tools sometime in the future. Meanwhile, Nightly will continue to be the best place to learn and code CSS Grid.

Let me know what you think. Feedback is definitely wanted. Which tools are the most helpful? Which parts are confusing? Or simply not very helpful?

Not many people have a lot of experience with Grid, and getting real feedback from real developers and designers can have a strong effect. We need to hear from you.