共用方式為

檢查 CSS 網格佈局

使用元素工具中的版面標籤，辨識網站上的 CSS 網格，並透過可自訂的網格覆蓋層來除錯網格佈局問題。

詳細內容：

在渲染的網頁中顯示格子覆蓋層

CSS Grid 是一種強大的網頁版面設計範式。 一個不錯的網頁是 MDN 上的 CSS 網格佈局，可以了解 CSS Grid 及其 功能。

要在渲染網頁中使用格子覆蓋層：

  1. 在新視窗或分頁中，前往使用 CSS 網格佈局的頁面，例如 Inspect CSS Grid 佈局示範 頁面。

  2. 右鍵點擊網頁，然後選擇 檢查。

    DevTools 開啟，選取 Elements 工具，顯示 DOM 樹。

  3. 在 DOM 樹中，展開主體>。

    這些 <div> 元素帶有 格狀 徽章：

    顯示格網覆蓋層

    當網頁中的 HTML 元素已經或display: griddisplay: inline-grid套用到該元素時，元素工具中的 DOM 樹中該元素旁邊會顯示一個格子徽章。

  4. 點擊元素旁邊的 格子 徽章，例如 <div class="fruit-box">：

    格子徽章，已選中

    在渲染的網頁中，元素上方會顯示格子覆蓋層。 格子徽章從白底藍字變為藍底白字。

    在渲染後的網頁中，CSS 格網覆蓋層會出現在網頁元素前方的圖層上。 CSS 格網覆蓋顯示格線 (列、欄) 及軌道的位置。

    如果你多次點擊 格子 徽章，它會自動開關。

    同樣地，有時會有 子格柵 徽章。 你可以點擊 子格 網徽章來切換 GSS 網格覆蓋層。 請參見MDN 的子網格 。

  5. 點選 Layout 標籤，該標籤與元素工具中的 Styles 標籤分組：

    版面標籤

    佈局分頁包含格網/格子車道區塊，內容包括：

    • 一個下拉選單。
    • 顯示選項的勾選框。
    • 每個使用 CSS Grid 佈局的元素都有一個核取方塊。

    當網頁使用 CSS 格子時， 佈局 標籤會包含 格網/格子通道 區塊。 請使用格 網/格網通道 區塊，設定在渲染網頁的格子覆蓋層中顯示哪些資訊。

對齊格線項目及其內容：格線編輯器彈出視窗

你只要點擊按鈕，就能 (打開格子編輯器彈出視窗) ，來對齊 CSS 網格項目及其內容，而不用直接定義 CSS 規則。

要對齊 CSS 網格項目及其內容：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

    因此，DOM 樹 (中如帶有格狀徽章的元素（如 <div class="fruit-box">) ）會選擇 Layout 標籤。

  2. 選擇 「樣式」 標籤。

  3. 找一條包含 Open grid editor 按鈕的 CSS 規則，例如規則：.fruit-box

    「開放格子編輯器」按鈕

  4. 在 CSS 規則中，點擊 ，旁邊 display: grid的 ，點擊 Open grid editor 按鈕。

    格 子編輯器 彈出視窗會打開：

    格子編輯器彈出視窗

    格子編輯器彈出視窗包含四組按鈕作為選項：

    • 對齊內容
    • 正當化內容
    • 對齊項目
    • justify-items（正義項目）

    在每組按鈕中，這些按鈕是互斥的選項按鈕。 如果你連按兩次選項按鈕，該組內不會選任何選項按鈕，數值會回復 正常。

  5. 在 格子編輯器 的彈出視窗中，在任何一組按鈕中，點擊一個按鈕。 要恢復 正常，請點擊兩次按鈕。

    按鈕的前景顏色會從黑色變成藍色，數值也從 普通 變為所選值。

    格子項目和內容會在視窗中重新渲染。

格狀檢視選項

佈局面板中的格網/格網車道區塊包含兩個子區塊：

詳情如下。

覆蓋顯示設定

在 元素 工具的 佈局 面板中，可展開的 格網/格子通道 區塊中，有一個覆蓋 顯示設定 的子區：

「覆蓋顯示設定」子章節

覆蓋顯示設定小節由兩部分組成：

  • 一個下拉選單，包含以下指令：

    • 隱藏線條標籤 - 隱藏每個格子疊加的線條標籤。
    • 顯示行號 - 顯示預設 (選取的每個格子覆蓋層的行號) 。
    • 顯示線名 - 在有線名的網格中，請顯示每個格子疊加的線名。

  • 勾選框：

    • 顯示軌道大小 - 切換以顯示或隱藏軌道大小。
    • 顯示區域名稱 - 切換以顯示或隱藏區域名稱，對於有命名格子區域的格子。
    • 延伸格線 - 預設情況下，格線只會顯示在有 display: grid 或 display: inline-grid 設定在該元素內。 當你開啟這個選項時，格線會沿著每個軸向延伸到視窗邊緣。

詳情如下。

節目行號

你可以顯示或隱藏渲染網頁中格子覆蓋層) (列和欄的行號。 在 CSS 網格中， 行號 用來識別分隔 CSS 網格中列與欄的垂直與水平線。 這些行號並非用於 HTML 原始碼檔案中的程式碼行數。

要顯示或隱藏格子覆蓋層中行號 (列和欄的行號) ：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格線區>塊的「覆蓋顯示設定」子區「>顯示線路標籤」下拉選單，選擇「顯示線號」。 這是預設選擇的。

    每個格子覆蓋層的線條 (列與列) 數顯示如下：

    顯示行號

預設情況下，正負行號 (列與欄) 顯示於格子覆蓋層上。 關於網格疊加中負數的資訊，請參閱MDN的「利用線為基礎擺放倒數格網佈局」。

隱藏行標籤

要在格子覆蓋層中隱藏行標籤：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格線車道區>塊的覆蓋顯示設定子區塊>「顯示線條標籤」下拉選單，選擇隱藏線條標籤：

    隱藏行標籤

    () 行/列的線條標籤會隱藏在每個格子覆蓋層上。

節目名稱

在渲染網頁的格子覆蓋層中，你可以顯示線名。 這讓更容易想像元素的起始與結束位置。

要在網格覆蓋層中顯示行名：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格線>區塊的「覆蓋顯示設定」子區「>顯示線路標籤」下拉選單，選擇「顯示線路名稱」：

    節目名稱

    顯示的是線名而非數字。 此選項會顯示每個格子覆蓋層的線條名稱（若提供名稱）。

    在上述例子中，有4條線的名稱是：left、middle1middle2right和。

    在示範中，橘色元素從左到右延伸，並grid-column: leftgrid-column: right依 CSS 規則呈現。

另請參閱:

節目軌道尺寸

在渲染網頁的格子覆蓋層中，你可以顯示軌道大小。

要在格子疊加中顯示軌道大小：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在 元素 工具的 佈局 標籤中，格 網/格網通道 區塊的格網/ 格線 通道覆蓋子區塊，選擇每個元素的勾選框，顯示格子覆蓋層。 例如，選擇 和 div.snack-box旁邊div.fruit-box的勾選框。

  3. 在格網/格子車道區>塊的覆蓋顯示設定子區塊中，選擇「顯示軌道大小」的勾選框：

    節目軌道尺寸

如果在 CSS) 中定義，每個行標籤都會顯示 authored size (，且 ：computed size

大小 詳細資料
authored size CSS 樣式表中定義的大小。 如果沒有明確定義，就不會被標示在標籤上。
computed size 螢幕上的實際大小。

在示範中，欄位大小定義如下，採集CSS屬性 grid-template-columns：

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

欄位標籤：

以下軌大小的線標籤顯示在格子欄上，針對示範元素 <div class="snack-box">：

履帶尺寸 作者尺寸 計算尺寸
1fr • 96.66px 1FR 96.66px
2法郎 • 193.34px 2fr 193.34px

如果你的機器顯示設定為不同的像素密度，示範可能會產生不同的數值，例如像素數量減半。

每個格子欄位的行標籤會顯示 之外authored sizecomputed size，因為欄位大小已 (CSS 樣式表中的 CSS 屬性grid-template-columns中指定) 撰寫。

行標籤：

以下軌大小的線標籤顯示在格子列上，針對示範元素 <div class="snack-box">：

履帶尺寸 作者尺寸 計算尺寸
80像素 不適用 80像素
80像素 不適用 80像素

如果你的機器顯示設定為不同的像素密度，示範可能會產生不同的數值，例如像素數量減半。

每列格子列的行標籤不會顯示 authored size，只有 computed size，因為列大小並未在 CSS 樣式表的 CSS 屬性 grid-template-rows 中 (指定) 。

另請參閱:

節目區域名稱

在渲染網頁的格子覆蓋層中，你可以顯示區域名稱，例如 頂、 底1 和 底2。

要顯示區域名稱：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格網車道區>塊的「覆蓋顯示設定」子區塊中，選擇「顯示區域名稱」的勾選框：

    節目區域名稱

延伸格網線

你可以沿著每個軸向將格子覆蓋的格線延伸到視窗邊緣。

延伸格網線：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在 格網/格網車道 的 >覆蓋顯示設定 子區塊中，選擇 延伸格線 勾選框：

    延伸格網線

網格疊加

在 元素 工具的 Layout 分頁中， (與 Styles 分頁) ，Grid / Grid Lanes 覆蓋 區塊包含了擁有 CSS 格線的元素清單。 每個格子都有核取方塊，並附有各種選項。

「格網/格網車道疊加」子章節

啟用多個網格的疊加視圖

要啟用多個網格的疊加視圖：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格網車道區>塊「網格/網格車道疊加」子區塊中，選擇多個網格名稱旁的勾選框：

    啟用多個網格的疊加視圖

    每個選取的元素都會顯示一個 CSS 格子的覆蓋層。 在上述範例中，啟用了三個網格覆蓋層。 每個 CSS 網格在渲染後的網頁上都有不同的顏色：

    • body - 金色格子疊加。
    • div.fruit-box - 粉紅色格子覆蓋層。
    • div.snack-box - 藍色格子覆蓋層。

自訂格子覆蓋顏色

要自訂格子覆蓋顏色：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格網通道區>塊的格網/格子通道覆蓋子區塊中，點擊元素名稱旁的「選擇此元素框的覆蓋顏色」：

    自訂格子覆蓋顏色

    色彩選擇器打開了。

另請參閱:

在網頁和 DOM 樹中標示格子元素

對於任何有 CSS 格線佈局的元素，你可以自動捲動到渲染網頁中的該元素，並自動選擇 DOM 樹中的元素。

要捲動到網頁中一個使用格子的元素，並在 DOM 樹中選擇該元素：

  1. 請依照上方「 在渲染網頁中顯示格子覆蓋層」中的步驟操作。

  2. 在格網/格子通道區塊>的格網/網格通道覆蓋子區塊中，點選元素面板中的顯示元素 (元素面板圖示中的顯示元素) 元素名稱旁邊的按鈕：

    在渲染後的網頁上高亮格子

    • 渲染後的網頁會捲動到使用 CSS 格線佈局的元素，並在渲染後的網頁中簡短標示該元素。

    • 在 元素 工具中，DOM 樹會自動捲動到該元素，並選擇該元素。

    這種自動捲動與高亮功能，無論元素的勾選框是否被選中或清除，都能有效。

另請參閱

示範網頁：

MDN：

注意事項

本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為Jecelyn Yeen。

創用CC授權 本作品採用 創用CC 姓名標示4.0國際授權條款授權。

  • Last updated on