![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

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

[Video](https://www.youtube.com/watch?v=M8SlBgul8ao)

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

![Grid overlay.](https://developer.chrome.com/static/blog/devtools-tips-7/image/grid-overlay-a5aead2da0816.png)

- 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**](https://developer.chrome.com/docs/devtools/css/grid.md.txt#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.](https://developer.chrome.com/static/blog/devtools-tips-7/image/the-grid-editor-c95d0a44fa3db.png)

For a more hands-on learning experience, follow the [Inspect CSS Grid](https://developer.chrome.com/docs/devtools/css/grid.md.txt) tutorial.