Inspect CSS Grid layouts

Use the Layout tab within the Elements tool to identify CSS grids on a website and debug grid layout issues by using customizable grid overlays.

Detailed contents:

• Display the grid overlay in a rendered webpage
• Align grid items and their content: the grid editor popup
• Grid viewing options
• Overlay display settings
  • Show line numbers
  • Hide line labels
  • Show line names
  • Show track sizes
  • Show area names
  • Extend grid lines
• Grid overlays
  • Enable overlay views of multiple grids
  • Customize the grid overlay color
  • Highlight the grid element in the webpage and DOM tree
• See also

Display the grid overlay in a rendered webpage

CSS Grid is a powerful layout paradigm for the web. A good webpage to learn about CSS Grid and its features is CSS grid layout at MDN.

To use the grid overlay in a rendered webpage:

1. Go to a page that uses CSS Grid layout, such as the Inspect CSS Grid layouts demo page, in a new window or tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens, with the Elements tool selected, showing the DOM tree.

3. In the DOM tree, expand body > main.

   The <div> elements have a grid badge:

   

   When an HTML element in the webpage has display: grid or display: inline-grid applied to it, a grid badge is displayed next to the element in the DOM tree in the Elements tool.

4. Click the grid badge next to an element, such as <div class="fruit-box">:

   

   A grid overlay is displayed over the element in the rendered webpage. The grid badge changes from blue text on white background, to white text on blue background.

   In the rendered webpage, the CSS Grid overlay appears on a layer in front of the webpage element. The CSS Grid overlay shows the position of the grid lines (rows and columns) and tracks.

   If you click the grid badge multiple times, it turns on and off.

   Similarly, sometimes there's a subgrid badge. You can toggle the GSS Grid overlay on a subgrid, by clicking the subgrid badge. See Subgrid at MDN.

5. Click the Layout tab, which is grouped with the Styles tab in the Elements tool:

   

   The Layout tab includes a Grid / Grid Lanes section, which includes:

   • A dropdown list.
   • Checkboxes for display options.
   • A checkbox for each element that uses CSS Grid layout.

   When a webpage uses a CSS grid, the Layout tab includes the Grid / Grid Lanes section. Use the Grid / Grid Lanes section to configure which information to display in grid overlays on the rendered webpage.

Align grid items and their content: the grid editor popup

You can align CSS grid items and their content by just clicking a button (to open the grid editor popup), rather than having to directly define CSS rules.

To align CSS grid items and their content:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

   As a result, the Layout tab is selected, for an element in the DOM tree (such as <div class="fruit-box">) that has a grid badge.

2. Select the Styles tab.

3. Find a CSS rule that has the Open grid editor button, such as the .fruit-box rule:

   

4. In the CSS rule, next to display: grid, click the Open grid editor button.

   The grid editor popup opens:

   

   The grid editor popup contains four sets of buttons as options:

   • align-content
   • justify-content
   • align-items
   • justify-items

   Within each set of buttons, the buttons are mutually exclusive option buttons. If you click an option button twice, no option button is selected in that set, and the value returns to normal.

5. In the grid editor popup, in any set of buttons, click a button. To return to normal, click a button twice.

   The button's foreground color changes from black to blue, and the value changes from normal to the selected value.

   The grid items and content are re-rendered in the viewport.

Grid viewing options

The Grid / Grid Lanes section in the Layout pane contains two subsections:

• Overlay display settings
• Grid overlays

Details are below.

Overlay display settings

In the Element tool's Layout pane, in the expandable Grid / Grid Lanes section, there' an Overlay display settings subsection:

The Overlay display settings subsection consists of two parts:

• A dropdown list, containing the following commands:

  • Hide line labels - Hide the line labels for each grid overlay.
  • Show line numbers - Show the line numbers for each grid overlay (selected by default).
  • Show line names - Show the line names for each grid overlay in the case of grids with line names.

• Checkboxes:

  • Show track sizes - Toggle to show or hide track sizes.
  • Show area names - Toggle to show or hide area names, in the case of grids with named grid areas.
  • Extend grid lines - By default, grid lines are only shown inside the element that has display: grid or display: inline-grid set on it. When you turn on this option, the grid lines extend to the edge of the viewport along each axis.

Details are below.

Show line numbers

You can show or hide line numbers (rows and columns) in the grid overlay in the rendered webpage. In CSS Grid, line numbers are used to identify the vertical and horizontal lines that separate rows and columns of a CSS grid. These line numbers are not for the lines of code in the HTML source file.

To show or hide line numbers (rows and columns) in the grid overlay:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Overlay display settings subsection > Show line labels dropdown list, select Show line numbers. This is selected by default.

   The numbers of the lines (rows and columns) for each grid overlay are displayed:

   

By default, the positive and negative line numbers (rows and columns) are displayed on the grid overlay. For information about negative numbers in the grid overlay, see Counting backwards in Grid layout using line-based placement at MDN.

Hide line labels

To hide line labels in the grid overlay:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Overlay display settings subsection > Show line labels dropdown list, select Hide line labels:

   

   The labels of the lines (rows/columns) are hidden, on every grid overlay.

Show line names

In the grid overlay in the rendered webpage, you can show line names. This makes it easier to visualize the start and end position of an element.

To show line names in the grid overlay:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Overlay display settings subsection > Show line labels dropdown list, select Show line names:

   

   Line names instead of numbers are displayed. This option displays the names of the lines for each grid overlay, if names are provided.

   In the above example, 4 lines have names: left, middle1, middle2, and right.

   In the demo, the Orange element spans from left to right, via grid-column: left and grid-column: right CSS rules.

See also:

• Layout using named grid lines at MDN.

Show track sizes

In the grid overlay in the rendered webpage, you can show track sizes.

To show track sizes in the grid overlay:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Elements tool's Layout tab, in the Grid / Grid Lanes section, in the Grid / Grid Lanes overlays subsection, select the checkbox for each element on which to show the grid overlay. For example, select the checkbox next to div.fruit-box and div.snack-box.

3. In the Grid / Grid Lanes section > Overlay display settings subsection, select the Show track sizes checkbox:

   

Each line label shows the authored size (if defined in the CSS) and the computed size:

Size	Details
authored size	The size defined in the CSS stylesheet. Omitted from the label, if not defined.
computed size	The actual size on screen.

In the demo, the column sizes are defined as follows, in the CSS property grid-template-columns:

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

Column labels:

The following track-size line labels are displayed on the grid columns, for the demo's element <div class="snack-box">:

Track size	Authored size	Computed size
1fr • 96.66px	1fr	96.66px
2fr • 193.34px	2fr	193.34px

If your machine's display is set to a different pixel density, the demo might produce different values, such as half as many pixels.

The line label on each grid column displays the authored size in addition to the computed size, because column sizes have been authored (specified), in the CSS property grid-template-columns in the CSS stylesheet.

Row labels:

The following track-size line labels are displayed on the grid rows, for the demo's element <div class="snack-box">:

Track size	Authored size	Computed size
80px	n/a	80px
80px	n/a	80px

If your machine's display is set to a different pixel density, the demo might produce different values, such as half as many pixels.

The line label on each grid row doesn't display an authored size, only the computed size, because row sizes have not been authored (specified) in the CSS property grid-template-rows in the CSS stylesheet.

See also:

• grid-template-columns at MDN.
• grid-template-rows at MDN.

Show area names

In the grid overlay in the rendered webpage, you can show area names, such as top, bottom1 and bottom2.

To show area names:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Overlay display settings subsection, select the Show area names checkbox:

   

Extend grid lines

You can extend the grid overlay's grid lines to the edge of the viewport, along each axis.

To extend the grid lines:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Overlay display settings subsection, select the Extend grid lines checkbox:

   

Grid overlays

In the Elements tool's Layout tab (grouped with the Styles tab), the Grid / Grid Lanes overlays section contains a list of elements that have a CSS grid. Each grid has checkbox, along with various options.

Enable overlay views of multiple grids

To enable overlay views of multiple grids:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Grid / Grid Lanes overlays subsection, select the checkbox next to each name of multiple grids:

   

   A CSS Grid overlay is displayed for each selected element that has a CSS grid. In the above example, three grid overlays are enabled. Each CSS grid has a different color in the rendered webpage:

   • body - the gold grid overlay.
   • div.fruit-box - the pink grid overlay.
   • div.snack-box - the blue grid overlay.

Customize the grid overlay color

To customize the grid overlay color:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Grid / Grid Lanes overlays subsection, click the Choose the overlay color for this element box next to an element name:

   

   The Color Picker opens.

See also:

• Change colors with the Color Picker in CSS features reference.

Highlight the grid element in the webpage and DOM tree

For any element that has a CSS grid layout, you can automatically scroll to the element in the rendered webpage, and automatically select the element in the DOM tree.

To scroll to a grid-using element in the webpage and select the element in the DOM tree:

1. Do the steps in Display the grid overlay in a rendered webpage, above.

2. In the Grid / Grid Lanes section > Grid / Grid Lanes overlays subsection, click the Show element in the Elements panel () button next to an element name:

   

   • The rendered webpage is scrolled to the element that uses CSS grid layout, and the element is briefly highlighted in the rendered webpage.

   • In the Elements tool, the DOM tree automatically scrolls to the element, and the element is selected.

   This automatic scrolling and highlighting works regardless of whether the element's checkbox is selected or cleared.

See also

Demo webpages:

• Inspect CSS Grid layouts

MDN:

• CSS grid layout
  • Grid layout using line-based placement
  • Layout using named grid lines
• grid-template-columns
• grid-template-rows

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.

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