檢查 CSS 格線版面配置

Jecelyn Yeen

Sofia Emelianova

本指南將說明如何在 Chrome 開發人員工具的「Elements」面板中找出 CSS 格線、檢查這些格線，並對版面配置問題進行偵錯。

本文螢幕截圖中顯示的螢幕截圖來自以下兩個網頁：Fruitbox 和 Snackbox。

探索 CSS 格線

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，在「元素」面板顯示該元素旁會顯示 grid 徽章。

按一下徽章即可切換頁面中的格線重疊顯示模式。疊加層會在元素上方顯示，並以格線形式排列，方便您顯示格線和軌跡的位置：

開啟「Layout」窗格。當頁面中納入格線時，版面配置窗格會包含「Grid」區段，其中包含許多檢視這些格線的選項。

使用格線編輯器對齊格線項目和其內容

您只要按一下按鈕即可對齊格線項目及其內容，而不必輸入 CSS 規則。

如何對齊格線項目及其內容：

1. 在「Elements」 >「Styles」窗格中，按一下 display: grid 旁邊的 「Grid Editor」按鈕。

   

2. 在「Grid Editor」中，按一下對應的按鈕，為格線項目及其內容設定 align-* 和 justify-* CSS 屬性。

   

3. 在可視區域中觀察調整後的格線項目和內容。

格狀檢視選項

「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 元素醒目顯示、捲動至頁面中的該元素，然後在「元素」面板中選取該元素。