CSS Grid is awesome. It's more awesome if you can see the lines while you are defining the grid. So we here at the Mozilla Developer Relations Team created this basic Grid Inspector tool. Use it to see your grids.
We know this tool doesn't always work properly, and we are looking at when and why. It does however work for many grids — perhaps all of the simple ones. Please help out by reporting problems and making requests. We are limited in what we can do in this Extension, but many of the ideas being tested in this little project are informing more powerful tools for the future. Plus, for many of us working to understand Grid, this tool has been incredibly helpful, even with its limitations. We hope it's helpful for you, too.
This tool works only in Firefox. If you download and use Firefox Nightly, you'll have the most-complete implementation of CSS Grid, and you don't have to flip a flag to make it work. It will Just Work™.
- Open Firefox. Nightly is best.
- Go to the release page, and click to download the most recent version of the the .xpi file.
- Firefox will offer to install it for you. Say yes, please.
- Use it by clicking the new icon in the upper right corner of the browser.
- Enjoy! And file issues with new ideas, feature requests, and bug reports. We need your help to make this better.
Need more help installing? Watch this silent movie.
To develop this extension, you'll need node and npm.
For local development,
git clonethe projectnpm installto pick up dependencies includingjpmnpm startto start a test copy and file watching server.
Currently building against Firefox Nightly.