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.

Step 1: Visit the web page where you want to inspect the grid. Right-click on the page and select Inspect from the context menu that appears.

Step 2: The DevTools will appear with the elements tab in focus. If the elements tab is not open, then click Elements from the main toolbar.

Step 3: In the Elements tab, select the Layout pane. In the pane, you will find a grid section with various options.

Locating Grid Section

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....