CSS Grid Inspector
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™.
To Install This Extention:
- Open Firefox. Nightly is best.
- Install the extension from the Firefox Add-ons Site
- 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 Help Develop This Extention
To develop this extension, you'll need
For local development,
git clonethe project
npm installto pick up dependencies including
npm run initto create a test profile
npm startto start a test copy and file watching server.
Currently building against Firefox Nightly.