Using the CSS Grid Inspector

Firefox has an inbuilt tool that enables you to inspect a grid via the browser. There are also third party tools for doing this in Chrome.

Firefox DevTools provides a way to inspect the grid layout of any grid that you view in the browser. This can be helpful if you have a complex grid with grid items spanning many tracks, or a grid that's very sparsely populated. In instances like these, it can be hard to visualize the actual grid that's holding the items in place.

The grid inspector in DevTools allows you to see the grid lines and any gutters between them.

Like this:

Screenshot of a grid in the grid inspector
Example of a grid when viewed in Firefox DevTools.

How to Use the Firefox grid inspector

Here's how to use Firefox DevTools to view the grid's layout.

  1. Screenshot of the contextual menu

    Open the Inspector

    While viewing a web page nomally in your browser, right-click on the grid you want to inspect and select Inspect Element from the contextual menu.

  2. Screenshot of the grid inspector

    Select the Grid Inspector

    Ensuring that the element with display: grid is selected in the pane with the source code, and the Rules tab is selected in the other pane, click the grid icon (Screenshot of the grid inspector) in between display: grid.

Extensions for Chrome

At the time of writing, Google Chrome doesn't have a built-in grid inspector. However, a couple of third party tools have been built for exactly this purpose.