本指南將說明如何在 Chrome 開發人員工具的「Elements」面板中找出 CSS 格線、檢查這些格線，並對版面配置問題進行偵錯。
本文螢幕截圖中顯示的螢幕截圖來自以下兩個網頁：Fruitbox 和 Snackbox。
探索 CSS 格線
如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，在「元素」面板顯示該元素旁會顯示 grid 徽章。
按一下徽章即可切換頁面中的格線重疊顯示模式。疊加層會在元素上方顯示，並以格線形式排列，方便您顯示格線和軌跡的位置：
開啟「Layout」窗格。當頁面中納入格線時，版面配置窗格會包含「Grid」區段，其中包含許多檢視這些格線的選項。
使用格線編輯器對齊格線項目和其內容
您只要按一下按鈕即可對齊格線項目及其內容，而不必輸入 CSS 規則。
如何對齊格線項目及其內容：
在「Elements」 >「Styles」窗格中，按一下
display: grid旁邊的
「Grid Editor」按鈕。
在「Grid Editor」中，按一下對應的按鈕，為格線項目及其內容設定
align-*和justify-*CSS 屬性。
在可視區域中觀察調整後的格線項目和內容。
格狀檢視選項
「Layout」窗格中的「Grid」區段包含 2 個子部分：
- 重疊顯示設定
- 格線疊加層
以下將詳細說明各個子部分。
重疊顯示設定
「重疊顯示設定」包含兩個部分：
a. 下拉式選單，其中包含下列選項：
- 隱藏線條標籤：隱藏每個格狀疊加層的線條標籤。
- 顯示行號：顯示每個格狀疊加層的行號 (預設為選取)。
- 顯示線條名稱：顯示每個格線疊加層的線條名稱，在使用行名稱格線的情況下。
b. 包含下列選項的核取方塊：
- 顯示軌道大小：切換以顯示或隱藏軌跡大小。
- 顯示區域名稱：切換顯示或隱藏區域名稱 (適用於已命名格線區域的格線)。
- 延長格線：根據預設，格線只會顯示在元素中，且已設定
display: grid或display: inline-grid。啟用這個選項時，格線會沿著每個軸延伸至可視區域的邊緣。
現在讓我們一起來深入研究這些設定。
顯示行號
根據預設，正數和負行數會顯示在格狀疊加層中。
隱藏行標籤
選取「隱藏行標籤」即可隱藏行號。
顯示行名稱
您可以選取「顯示行名稱」來查看行名稱，而不是數字。在這個範例中，有四行的名稱為 left、中 1、medium2 和 Right。
在這個示範中，orange 元素使用 CSS grid-column: left / right 從左到右橫跨。顯示線條名稱，以視覺化的方式呈現元素的開始和結束位置。
顯示軌道大小
勾選「顯示軌跡大小」核取方塊，查看格狀檢視畫面大小。
開發人員工具會在每一行標籤中顯示 [authored size] - [computed size]：已授權大小：在樣式表中定義的大小 (如未定義，則會被省略)。「運算」大小：畫面上顯示的實際大小。
在本示範中，snack-box 欄大小是在 CSS grid-template-columns:1fr 2fr; 中定義。因此，資料欄行標籤會顯示編寫和計算大小：1fr - 96.66px 和 2fr - 193.32px。
資料列行標籤只會顯示計算大小：80px 和 80px，因為樣式表中未定義任何列大小。
顯示區域名稱
若要查看區域名稱，請勾選「顯示區域名稱」核取方塊。在此範例中，格線中有三個區域：top、bottom1 和 bottom2。
延長格線
勾選「延長格線」核取方塊，將格線延伸到每個軸的可視區域邊緣。
格線疊加層
「格線疊加層」區段包含頁面上顯示的格線清單，每個格線都有核取方塊，以及各種選項。
啟用多個格線的重疊檢視畫面
你可以啟用多個格線的重疊檢視畫面。在此範例中，已啟用兩個格線疊加層：main 和 div.snack-box，兩者分別以不同顏色表示。
自訂格線疊加層顏色
如要自訂各個格狀疊加層顏色，請按一下顏色挑選器。
醒目顯示格線
按一下醒目顯示圖示，即可立刻將 HTML 元素醒目顯示、捲動至頁面中的該元素，然後在「元素」面板中選取該元素。
