A Firefox extension for seeing the grid lines created by CSS Grid —
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.

Screenshot of this tool in use

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:

  1. Open Firefox. Nightly is best.
  2. Install the extension from the Firefox Add-ons Site
  3. Use it by clicking the new icon in the upper right corner of the browser.
  4. 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 node and npm.

For local development,

  • git clone the project
  • npm install to pick up dependencies including jpm
  • npm run init to create a test profile
  • npm start to start a test copy and file watching server.

Currently building against Firefox Nightly.