DevTools Tips hero logo

DevTools Tips: How to inspect CSS grid

Published on

Chrome DevTools makes debugging CSS grid layouts intuitive with a variety of visualization options.

Watch the video to learn how to toggle the grid overlay in the Elements panel and use it to:

Grid overlay.
  • Visualize and inspect grid layouts.
  • See row and column numbers to refer to when placing grid items.
  • Use line and area names and see them on the overlay if you have a lot of grid items and the numbers are confusing.
  • Check track sizes.

Additionally, with the Grid Editor in the Elements > Styles pane, you can align items and their content in a grid layout with a click of a button instead of typing CSS rules.

The Grid Editor.

For a more hands-on learning experience, follow the Inspect CSS Grid tutorial.

Published on Improve article


Meet the top layer: a solution to z-index:10000


Removing HTTP/2 Server Push from Chrome

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.