本頁面由 Cloud Translation API 翻譯而成。

CSS 子格狀檢視

CSS 格線是功能強大的版面配置引擎，但在父格線上建立的列和欄軌跡只能用於定位格線容器的直接子項。任何作者定義了已命名格線區域線條除了直接子項。使用 subgrid，即可分享追蹤大小、範本和名稱。本文將說明這項功能的運作方式。

在子格柵格推出前，內容通常會經過手動調整，以避免出現像這樣不整齊的版面配置。

三張資訊卡會並排顯示，每個資訊卡都包含三點內容：
標題、段落和連結每則訊息都有各自的文字長度
資訊卡上下對齊時，資訊卡中的上下對齊。

在子格柵格「之後」，您可以對齊大小不一的內容。

三張資訊卡會並排顯示，每個資訊卡都包含三點內容：
標題、段落和連結每個文字長度都不同，但子網格會讓每個內容項目中高度最高的項目設定資料列高度，藉此修正對齊問題。

瀏覽器支援

資料來源

子類別基本資訊

以下是介紹 CSS subgrid 基本概念的簡單用途。A 罩杯格線定義了兩個已命名的欄，第一個是寬度為 20ch，第二個是「剩下的」「1fr」聊天室。資料欄名稱不一定要填寫，但其實非常適合用於說明和教育用途

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

接著，該格線的子項會跨越這兩個欄，並設為格線容器，然後將 grid-template-columns 設為 subgrid，採用其父項的欄。

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

CSS 格線開發人員工具螢幕截圖，顯示兩欄並排顯示，並在資料欄行的開頭加上名稱。 — https://codepen.io/web-dot-dev/pen/NWezjXv

這樣就完成了，父網格的欄已成功傳遞至子網格。這個子格線現在可以將子項指派給當中的任一資料欄。

挑戰！重複執行相同的示範，但針對 grid-template-rows 執行。

分享網頁層級「巨集」格線

設計師通常與共用的格線合作以繪製線條覆蓋整個設計對齊任何元素網頁程式開發人員現在也可以！與此完全相符不僅能完成工作流程，還有更多其他功能

從微距網格到完成設計。您可以先建立格狀命名區域，然後再視需要放置後續元件。

導入最常見的設計格狀格線工作流程，深入瞭解 subgrid 的功能、工作流程和潛力。

以下是 Chrome 開發人員工具中，行動版網頁版面配置巨集格狀圖的螢幕截圖。這些線條都有名稱，而且有明確區域可以放置元件。

A 罩杯
Chrome CSS 格線開發人員工具螢幕截圖，顯示行動裝置大小的格線版面配置
其中列與欄的名稱以快速識別：滿版、
system-status、primary-nav、primary-header、main、footer and system-gestures.

下列 CSS 會建立這個網格，其中包含裝置的具名列和欄版面配置。每個列和欄的大小各不相同，

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

有些其他樣式提供以下設計。

與先前相同的 CSS 開發人員工具格線重疊，但這次
呈現了行動系統 UI，有些陰影和色彩鮮豔。有助於瞭解
以及設計

這個父項中有各種巢狀元素。設計要求在導覽和標頭列下方使用全寬圖片。最左和最右欄線條名稱為 fullbleed-start 和 fullbleed-end。以這種方式命名格線可讓子項同時對齊，並使用 fullbleed 的放置簡寫字元。你很快會發現，這很方便。

A 罩杯
放大了開發人員工具中的格狀疊加層螢幕截圖，並特別聚焦於
完整開始和全出血欄的名稱。

在打造整體裝置版面配置時加上適當的命名列和高欄，請使用 subgrid 可將命名良好的列和欄傳遞至巢狀格線版面配置。這個這是subgrid神奇時刻。裝置版面配置會傳遞已命名的列傳送至應用程式容器，以便將其傳遞至應用程式的每個容器。

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS 子網格是用來取代格狀軌清單的值。資料列和元素範圍從父項跨越上層，因此現在是相同的列並提供資料欄如此一來，即可使用 .device 格線中的線條名稱到 .app 的子項，而不只是 .app。「.app」內的元素是無法參照 .device 建立的格線軌跡。

經過定義後，巢狀圖片現在就能在 subgrid 提供版面配置設計。沒有負值或技巧，而是簡單明瞭的單行程式碼，指出「我的版面配置從 fullbleed-start 到 fullbleed-end」。

.app > main img {
    grid-area: fullbleed;
}

成品完成的巨集版面配置，完整寬度巢狀圖片可正確地佔據主要導覽列和標題列，並延伸至已充飽的已命名欄列。 — https://codepen.io/web-dot-dev/pen/WNLyjzX

這樣就和設計人員等微距格線在 CSS 中導入這個這個概念可視需求隨您的擴充與成長

檢查支援情形

使用 CSS 和子格線的漸進式改善功能既熟悉又簡單。使用 @supports 並在括號內詢問瀏覽器是否瞭解做為範本資料欄或資料列的值。以下範例會檢查 grid-template-columns 屬性是否支援 subgrid 關鍵字，如果為真，表示可使用子格線

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

Chrome、Edge、Firefox 和 Safari 皆內建強大的 CSS 格線開發人員工具，以及 Chrome。 Edge 和 Firefox 提供了一些特定工具，可協助您進行 Subrid。Chrome 宣布推出導入相關工具 115 年 Firefox 已推出一年以上。

顯示在元素中的子格線徽章螢幕截圖預覽
面板。

子格徽章的運作方式與格狀徽章類似，但一眼就能看出電網屬於子電網，也沒有。

資源

這份清單收錄了子格狀檢視文章、示範內容和整體靈感。如要查看子格線的下一步教育，盡情探索這些實用資源！