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