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.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/I2PqMSLelhTdl7lng4Yu.png?auto=format)
- 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.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/Qg4gEmRCgnC2qfMhzfsJ.png?auto=format)
For a more hands-on learning experience, follow the Inspect CSS Grid tutorial.
Published on • Improve article