Inspect CSS Grid

This article walks you through identifying CSS grids on a website and debugging grid layout issues using customizable grid overlays.

The examples used in the figures in this article are taken from the following webpages.

Before you begin

CSS Grid is a powerful layout paradigm for the web. A great place to get started learning about CSS Grid and the many features is the CSS Grid Layout guide on MDN.

Discover CSS grids

When an HTML element on your page has display: grid or display: inline-grid applied to it, a grid badge is displayed next to it in the Elements panel.

Discover grid

Choose the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to display the position of the grid lines and tracks:

Toggle grid badge

Open the Layout pane. When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing the grids.

Layout pane

The Grid section in the Layout pane contains the following 2 sub-sections.

  • Overlay display settings
  • Grid overlays

Overlay display settings

The Overlay display settings consists of following 2 parts.

  • Choose one of the following options from the dropdown menu.

    Line option Details
    Hide line labels Hide the labels of the lines for each grid overlay.
    Show line numbers Display the numbers of the lines for each grid overlay (selected by default).
    Show line names Display the names of the lines for each grid overlay when names are provided.
  • Choose the checkbox next the following options.

    Option Details
    Show track sizes Display (or hide) the sizes of the tracks.
    Show area names Display (or hide) the names of the area, when names are provided.
    Extend grid lines Displays (or hides) the extensions of the grid dimensions along each axis. By default, grid lines are only shown inside the element with display: grid or display: inline-grid CSS set on it.

The following sections provide details for each of the Overlay display settings.

Show line numbers

By default, the positive and negative line numbers are displayed on the grid overlay.

For more information about negative numbers in the grid overlay, navigate to Line-based placement with CSS Grid.

Display line numbers

Hide line labels

Choose Hide line labels to hide the line numbers.

Hide line labels

Show line names

For more information about line names in the grid overlay, navigate to Layout using named grid lines.

Choose Show line names to view the line names instead of numbers. In the example, 4 lines have names: left, middle1, middle2, and right.

Show line names

Show track sizes

Enable the Show track sizes checkbox to view the track sizes of the grid.

DevTools displays [authored size] and [computed size] in each line label.

Size Details
authored size The size defined in stylesheet (omitted if not defined).
computed size The actual size on screen.

In the demo, the snack-box column sizes are defined in the grid-template-columns:1fr 2fr; CSS. Therefore, the column line labels display both authored and computed sizes.

Track size Authored size Computed size
1fr96.66px 1fr 96.66px
2fr193.32px 2fr 193.32px

The row line labels display only computed sizes, since there are no row sizes defined in the stylesheet.

Track size Authored size Computed size
80px   80px
80px   80px

Show track sizes

Show area names

To view the area names, enable the Show area names checkbox. In the example, there are 3 areas in the grid: top, bottom1 and bottom2.

Show area names

Extend grid lines

Enable the Extend grid lines checkbox to extend the grid lines to the edge of the viewport along each axis.

Extend grid lines

Grid overlays

The Grid overlays section contains a list of grids that are present on the page, each with a checkbox, along with various options.

Enable overlay views of multiple grids

To display the overlay grid for multiple grids, choose the checkbox next to each name of the grid. In the example, there are 2 grid overlays enabled that are each represented with different colors.

  • main
  • div.snack-box

Enable overlay views of multiple grids

Customize the grid overlay color

To open the color picker and customize the grid overlay color, choose the box next to the name of the grid overlay.

Customize the grid overlay color

Highlight the grid

To highlight the HTML element in the Elements tool and scroll to it on the webpage, choose the Show element in the Elements panel (Show element in the Elements panel icon) icon.

Highlight the grid

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.