CSS 子格狀檢視

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

在子網格「之前」，使用者通常會手動調整內容，以避免如下所示的版面配置發生。

系統會並排顯示三張資訊卡，每張資訊卡都包含三個位元的內容：標題、段落和連結。每個文字的長度都不相同，在資訊卡中彼此相鄰時，會產生一些難以對齊的對齊方式。

子網格「之後」，即可讓各種大小的內容保持一致。

系統會並排顯示三張資訊卡，每張資訊卡都包含三個位元的內容：標題、段落和連結。每個文字長度都不同，但 subgrid 利用允許每個內容項目的最高值設定列高度並修正所有對齊問題，藉此修正了對齊問題。

瀏覽器支援

  • 117
  • 117
  • 71
  • 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 和 Subgrid，使用 @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 推出一年以上。

在「元素」面板中的元素上查看子格線徽章的螢幕截圖。

子格線徽章與格線徽章相似，但可讓您一眼看出哪些網格是子網格，哪些不是。

資源

本清單內容包含子格線文章、示範和整體靈感，有助於快速上手。如果您想尋找次方教育的下一步，歡迎探索這些實用資源！