開發人員工具提示：如何檢查 CSS 格線

Sofia Emelianova

GitHub

Chrome 開發人員工具透過多種視覺化選項，讓 CSS 格線版面配置偵錯直觀。

請觀看影片，瞭解如何在「元素」面板中切換格線疊加層，並藉此：

• 以視覺化方式呈現及檢查格線版面配置。
• 查看資料列和欄號，以便在放置格線項目時參照。
• 如果您有多個格線項目，請使用線條和區域名稱，以便在疊加層上查看這些項目，但數字令人感到困惑。
• 檢查音軌大小。

此外，您只要在「Elements」(元素) >「Styles」(樣式) 窗格中的「Grid Editor」(格線編輯器) 中點選一個按鈕，即可以格狀版面配置對齊項目及其內容，而不必輸入 CSS 規則。

如需更多實作學習體驗，請按照「檢查 CSS 格線」教學課程操作。