CSS 子格狀檢視

CSS 格線是功能非常強大的版面配置引擎，但在父項格線中建立的資料列和資料欄軌跡只能用於格線容器的直接子項位置。除了直接子項之外，任何作者定義的命名格線區域和線條都會遺失。使用 subgrid，即可與巢狀格線共用追蹤大小、範本和名稱。本文將說明這項功能的運作方式。

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

三張資訊卡會並排顯示，每張資訊卡有三位元內容：標頭、段落和連結。每個文字長度都不相同，因此資訊卡中的文字彼此相鄰時，會造成一些尷尬的對齊。

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

三張資訊卡會並排顯示，每張資訊卡各有三個內容：標題、段落和連結。每個文字長度都不同，但子格線已透過允許每個內容項目的最高值設定資料列高度，並修正任何對齊問題，藉此修正對齊方式。

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：71。
  • Safari：16 歲。

資料來源

子類別基本資訊

以下是介紹 CSS subgrid 基本概念的簡單用途。一個格線由兩個已命名的資料欄定義，第一個寬度是 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 開發人員工具中，行動版網頁版面配置巨集格狀圖的螢幕截圖。這些線條都有名稱，而且有明確區域可以放置元件。

這張 Chrome CSS 格線開發人員工具螢幕截圖，顯示行動裝置大小的格狀版面配置，其中資料列和資料欄的命名方式可用來快速識別：fullbleed、system-status、primary-nav、primary-header、main、footer 和 system-gesture。

下列 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 的位置簡寫對齊。你很快會發現，這很方便。

開發人員工具中的格線疊加層放大螢幕截圖，特別著重在全出開始和滿版結尾的資料欄名稱。

整體裝置版面配置是使用適當命名的列和欄建立而成，使用 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 關鍵字。如果為 true，表示可使用子格線

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

開發人員工具

Chrome、Edge、Firefox 和 Safari 都提供優異的 CSS 格線開發人員工具，而 Chrome、Edge 和 Firefox 也提供特定工具，可協助處理子格線。Chrome 在 115 年宣布推出工具，而 Firefox 已有一年以上的版本。

元素面板中元素的子格式徽章預覽螢幕截圖。

子格線徽章的運作方式與格狀徽章類似，但視覺上會分辨哪些電網屬於子電網，哪些沒有。

資源

這份清單收錄了子格狀檢視文章、示範內容和整體靈感，有助於您快速上手。如果您在尋找下班級教學的後續步驟，歡迎盡情探索這些實用資源！