How to Inspect a Grid

To inspect the grid layout of an element on a web page, follow these steps:

Step 1: Using Edge, visit a site that uses grid layouts. Right-click on the page and select Inspect from the context menu that appears. This will open DevTools.

Step 2: Click the Elements tab in the DevTools and in the DOM, find elements with a grid label, or use the inspect tool to focus the element in the DOM. Click on the grid label to activate the grid inspection.

Inspecting a Grid

Inspecting CSS Grid in Microsoft Edge Browser

CSS has grid layouts, which allow developers to arrange elements in rows and columns. In DevTools, the Elements tool provides a layout pane where you can customize various options related to the inspection of any grid layout on the page.

Similar Reads

Benefits of inspecting the CSS grid

The various benefits of inspecting CSS grids are:...

How to Inspect a Grid

To inspect the grid layout of an element on a web page, follow these steps:...

How to open Grid section

The grid section is present in the layout pane in the Elements tab in DevTools. To locate it, follow these steps....

Various options for Grid overlay

The layout pane in the elements tool provides options for CSS grid and flexbox. In the grid section, you have various overlay options related to visual inspection, such as colors and lines.The various options under this grid section are:...

Inspection of a Grid

Let’s inspect a CSS grid on the GFG site....