Inspection of a Grid

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

Step 1: Visit the site and open the Elements tab in DevTools.

Step 2: In DevTools, locate the grid section under the layout pane.

Step 3: Various grids of the site will be listed in this section. Inspect the grid and use the various options provided if required.

Inspecting a Grid in GFG site

CSS Grid is very useful layout which can be made responsive but dealing with grids can be hard for developers. Edge provides Grid inspection with the help of color and lines you can understand the grid structure of the grid layout.


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

Contact Us