CSS Subgrid 完整教學:巢狀網格佈局讓你的切版功力直接升級
身為前端設計師,你一定遇過這個痛苦:用 CSS Grid 排了一組卡片,每張卡片裡面的標題、內容、按鈕高度都不一樣,看起來參差不齊。你試過用 min-height 硬撐,試過用 JavaScript 動態計算高度,但這些方法都很 hacky。
好消息是,CSS Subgrid 終於在 2024 年底達到所有主流瀏覽器都支援的里程碑,它讓子元素可以直接繼承父元素的 Grid 軌道定義,從根本解決巢狀對齊問題。這篇教學會從概念講到實作,讓你馬上能在專案中用起來。
什麼是 CSS Subgrid?
簡單來說,CSS Subgrid 是 CSS Grid Level 2 規範中的一個功能,它允許 Grid 容器的子項目使用 grid-template-rows: subgrid 或 grid-template-columns: subgrid 來繼承父容器的網格軌道。
傳統的巢狀 Grid,外層和內層各自定義自己的軌道,彼此獨立運作。但 Subgrid 打破了這個限制——內層的格線會直接對齊外層的格線,不需要手動同步。
/* 父容器 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* 子項目使用 subgrid */
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
就是這麼簡單,一行 subgrid 就搞定了過去需要一堆 workaround 的對齊問題。
Subgrid vs 巢狀 Grid:到底差在哪?
這是初學者最容易搞混的地方。讓我用一個實際場景解釋:
巢狀 Grid(沒有 Subgrid):每張卡片自己定義三行(標題、內容、按鈕),但因為每張卡片的內容長度不同,行高各自為政,三張卡片放在一起就會「標題不對齊、按鈕不對齊」。
使用 Subgrid:三張卡片共享父容器的行軌道定義,第一行的高度由三張卡片中最高的標題決定,第二行由最長的內容決定——自動對齊,零 JavaScript。
我第一次看到這個效果的時候,真的有一種「CSS 終於長大了」的感動。這功能等了好幾年,現在終於能放心用了。
瀏覽器支援現況(2026)
截至 2026 年初,CSS Subgrid 的瀏覽器支援狀況已經非常理想:
- Chrome 117+(2023 年 9 月起支援)
- Firefox 71+(最早支援 Subgrid 的瀏覽器)
- Safari 16+(2022 年 9 月起支援)
- Edge 117+(跟隨 Chromium)
根據 Can I Use 的數據,全球瀏覽器支援率已超過 95%。除非你需要支援 IE 或非常舊版的 Chrome,否則可以放心使用。如果真的需要向下相容,可以用 @supports 做漸進增強。
Subgrid 基礎語法教學
使用 Subgrid 有三個關鍵步驟:
第一步:父容器定義 Grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 1rem;
}
第二步:子項目設定跨越範圍
.child {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
}
第三步:孫元素自動對齊
子項目裡面的元素(孫元素)會自動分配到繼承的軌道中,不需要額外設定。
要注意的是,subgrid 可以只用在 rows 或 columns 其中一個方向,另一個方向可以自訂自己的軌道。這種「部分繼承」的彈性讓你在實務上更好用。
實戰範例:卡片佈局對齊
這是 Subgrid 最經典的使用場景。假設你有一組產品卡片,每張有圖片、標題、描述、價格四個區塊:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: repeat(4, auto);
gap: 1.5rem;
}
.product-card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
overflow: hidden;
}
.product-card img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
}
.product-card .price {
align-self: end;
font-weight: 700;
padding: 0 1rem 1rem;
}
效果就是:不管哪張卡片的標題比較長、描述比較多,所有卡片的每個區塊都會自動對齊到同一條水平線上。這在以前需要複雜的 flexbox hack 或 JavaScript,現在三行 CSS 搞定。
實戰範例:表單欄位對齊
另一個常見場景是表單設計。當你有一組表單欄位,每個欄位有 label 和 input,而 label 的文字長度不同時,用 Subgrid 可以讓所有 label 和 input 完美對齊:
.form-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem 1rem;
}
.form-group {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
align-items: center;
}
這樣不管 label 是「姓名」兩個字還是「電子郵件地址」五個字,所有 input 欄位的左邊界都會對齊在同一條線上。超級優雅。
進階應用:Dashboard 佈局
在 Dashboard 頁面中,你經常需要在不同的區塊之間保持一致的格線對齊。Subgrid 可以讓內容區域的子元件共享外層的欄位定義:
.dashboard {
display: grid;
grid-template-columns: 240px repeat(4, 1fr);
grid-template-rows: 60px 1fr;
min-height: 100vh;
}
.main-content {
grid-column: 2 / -1;
display: grid;
grid-template-columns: subgrid;
gap: 1.5rem;
padding: 1.5rem;
}
.widget-large { grid-column: span 2; }
.widget-small { grid-column: span 1; }
這樣 Dashboard 裡的每個 widget 都能精準對齊外層的網格線,調整視窗大小時也能保持一致的間距和比例。
Subgrid 常見踩坑與解法
踩坑一:忘記設定 span
使用 grid-template-rows: subgrid 時,子元素必須用 grid-row: span N 明確宣告佔據幾個軌道。如果忘了設,瀏覽器不知道要繼承幾條軌道,Subgrid 就不會生效。
踩坑二:gap 的繼承行為
Subgrid 會繼承父容器的 gap 值。如果你想在子容器裡用不同的 gap,需要在子容器上重新宣告 gap。
踩坑三:DevTools 不好除錯
目前 Chrome DevTools 對 Subgrid 的視覺化支援還在改進中。Firefox 的 Grid Inspector 對 Subgrid 的支援比較完整,建議開發時搭配使用。
最佳實踐與設計建議
- 先想清楚哪個方向需要對齊:不是每個場景都需要同時繼承 rows 和 columns。
- 搭配 @supports 做漸進增強:雖然支援率已經很高,但養成好習慣不吃虧。
- 命名 Grid Lines 更好維護:在父容器定義具名的格線,子容器繼承後可以直接用名稱參照。
- 配合 CSS Container Queries 使用效果更佳。
如果你還沒看過 CSS Grid 切版教學,建議先打好基礎再來學 Subgrid。想了解更多 CSS 佈局比較,也可以參考 CSS Flexbox vs Grid 完整比較。
結語:Subgrid 讓切版回歸直覺
CSS Subgrid 不是什麼花俏的新特效,它解決的是前端設計師每天都會遇到的對齊問題。從卡片佈局到表單設計再到 Dashboard,Subgrid 讓你用最少的程式碼達到最精準的對齊效果。
我自己在導入 Subgrid 之後,很多以前需要寫一堆 CSS hack 的排版,現在三五行就搞定了。如果你還在用 JavaScript 計算元素高度來做對齊,是時候擁抱 Subgrid 了。
如果你對前端設計的其他 CSS 新特性也有興趣,推薦看看 CSS View Transitions API 教學 和 CSS Scroll-Driven Animations 教學,都是 2026 年前端設計師該學的好東西。
繼續閱讀
CSS Flexbox vs Grid 怎麼選?2026 前端佈局實戰比較完整指南
Flexbox 和 CSS Grid 到底該怎麼選?從實際案例出發,帶你搞懂一維與二維佈局的核心差異。
相關文章
你可能也喜歡
探索其他領域的精選好文