檢查 CSS 格線版面配置

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

本指南說明如何在 Chrome 開發人員工具的「Elements」面板中，找出網頁上的 CSS 格線、檢查格線，以及偵錯版面配置問題。

本文的螢幕截圖顯示的範例來自以下兩個網頁：水果盒和零食盒。

探索 CSS 格線

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，您可以在「Elements」面板中看到旁邊有 grid 徽章的元素。