Jecelyn Yeen
Sofia Emelianova
This guide shows you how to discover CSS grids on a page, examine them, and debug layout issues in the Elements panel of Chrome DevTools.
The examples shown in the screenshots appearing in this article are from these two web pages: Fruit box and Snack box.
Discover CSS grids
When an HTML element on your page has display: grid or display: inline-grid applied to it, you
can see a grid badge next to it in the Elements panel.