Chrome CSS Grid Inspector

While Chrome is a good overall browser it continues to lag behind Firefox in tools to inspect your CSS Grid. This plugin is a step to bridge the gap: Gridman: CSS Grid Inspector.  Follow the link when in the Chrome browser to install.

Once you install it to use it you have to do two things:

  1. Click on the extension icon in your chrome bar: image of Gridman icon. It will turn red (blue when inactive).
  2. Hover over the part of the page the grid is applied to. Then the grid will show:

    screenshot of page with grid section highlighted

Unfortunately it doesn’t work when you are editing local files. So to use it when developing your site you will need to push change to GitHub and view on GitHub Pages.