DevTools Tips: How to inspect CSS grid

Sofia Emelianova

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:

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

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