DevTools Tips: How to inspect CSS grid

DevTools Tips: How to inspect CSS grid

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.

This post is also available in: DevTools Tips: How to inspect CSS gridEnglish