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 年前端設計師該學的好東西。