2026 CSS Grid 最新功能完整解析：Subgrid 與 Grid-Lanes

過去十年間，CSS Grid 從一個提議，變成了現代前端排版的基石之一。2024 年，CSS Subgrid 正式成為瀏覽器支援的穩定功能。2025 年底，醞釀多年的 Masonry 佈局終於有了定名——display: grid-lanes。這兩個功能加在一起，改變了複雜排版的遊戲規則。更重要的是，隨著這些新功能的穩定，「需要 JavaScript 才能做到」的佈局模式，正在一個一個被 CSS 接管。

---

Subgrid：嵌套網格與父層軌道對齊

為什麼 Subgrid 重要

CSS Grid 的價值在於「二維佈局」——同時控制行（rows）和列（columns）。但當你嵌套一個 Grid 容器在另一個 Grid 容器裡時，過去內層 Grid 的軌道會完全忽略外層的軌道結構，導致內部元素對齊變得困難。

Subgrid 解決了這個問題：讓子容器共享父層的行列軌道。

Subgrid 基本語法

/* 外層：定義網格 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}

/* 內層：繼承父層軌道 */
.grid-item {
  display: grid;
  grid-column: span 3; /* 跨三列 */
  grid-row: span 2;    /* 跨兩行 */

  /* Subgrid：使用父層的行列軌道 */
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Subgrid 實際應用：卡片電網對齊

<div class="card-grid">
  <article class="card">
    <img src="hero.jpg" alt="">
    <div class="card-body">
      <h3>Card Title</h3>
      <p>Description text</p>
      <button>Action</button>
    </div>
  </article>
  <!-- 多個卡片 -->
</div>

/* 外層網格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.card {
  display: grid;
  /* 讓子卡片的 grid 繼承外層軌道 */
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  grid-row: span 3;
  gap: 0;
}

.card-body {
  /* 這個區塊的 grid 位置由 subgrid 繼承 */
  padding: 16px;
}

結果：所有卡片的高度、圖片高度、按鈕對齊，全部自動同步，不需要 JavaScript 計算。

瀏覽器支援

Subgrid 在所有主流瀏覽器（Chrome、Firefox、Safari、Edge）都已經穩定支援：

/*  Progressive enhancement：沒有 subgrid 支援的瀏覽器使用 fallback */
.card {
  display: grid;
  grid-template-columns: 1fr;
}

@supports (grid-template-columns: subgrid) {
  .card {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
}

---

Grid-Lanes：原生的 Masonry 佈局

從 display: masonry 到 display: grid-lanes

經過多年的討論（Masonry 佈局從 2017 年就有人在 GitHub 討論），CSS Working Group 終於在 2025 年確定了名稱：display: grid-lanes。

/* 2025 年 12 月確定的語法 */
.masonry-grid {
  display: grid-lanes;
  /* 只定義水平方向的軌道（列） */
  grid-template-columns: repeat(4, 1fr);
  /* items-flow 定義垂直方向的自然流動 */
  grid-template-rows: masonry;
  gap: 16px;
}

Grid-Lanes 與傳統 Grid 的區別

傳統 CSS Grid 需要同時定義行和列的軌道：

/* 傳統 Grid：定義兩個方向的軌道 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  /* 強制的 2x3 網格，空格會被留白 */
}

Grid-Lanes 的邏輯不同：只定義一個方向（預設是水平）的軌道，另一個方向由內容自然填充。

Grid-Lanes 實際應用：Pinterest 風格圖庫

<div class="gallery">
  <div class="gallery-item tall"><img src="photo1.jpg"></div>
  <div class="gallery-item"><img src="photo2.jpg"></div>
  <div class="gallery-item"><img src="photo3.jpg"></div>
  <div class="gallery-item tall"><img src="photo4.jpg"></div>
  <div class="gallery-item"><img src="photo5.jpg"></div>
  <!-- 更多項目 -->
</div>

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  /* items-flow: masonry 是預設行為 */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-item.tall img {
  /* tall 項目佔用更多垂直空間 */
  grid-row: span 3;
}

瀏覽器支援現況

Grid-Lanes 在 2026 年仍是實驗性功能：

瀏覽器	支援狀態
Chrome	⚠️ 實驗性（需要 flag）
Firefox	⚠️ 實驗性
Safari	❌ 不支援
Edge	⚠️ 實驗性

目前仍然建議使用 JavaScript 庫（如 Masonry.js）來做 Pinterest 風格佈局，或使用 CSS Multi-column 作為 fallback。

---

現代 Gap 語法：grid-gap 的演化

從 grid-gap 到 gap

CSS Grid 剛出來的時候，間距屬性叫做 grid-gap、grid-row-gap、grid-column-gap。後來這個語法被擴展到 Flexbox，於是屬性被重新命名為 gap、row-gap、column-gap。

/* 舊語法（已棄用）*/
.grid {
  grid-gap: 16px;
  grid-row-gap: 8px;
  grid-column-gap: 16px;
}

/* 現代語法（推薦）*/
.grid {
  gap: 16px;           /* 行和列相同 */
  gap: 8px 16px;       /* row column */
  row-gap: 8px;        /* 僅行間距 */
  column-gap: 16px;    /* 僅列間距 */
}

Gap 在 Grid-Lanes 中的應用

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px; /* row-gap column-gap */
}

---

常見 CSS Grid 排版範例

經典 12 欄系統

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

Dashboard 佈局

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; background: #1a1a1a; }
.main    { grid-area: main; padding: 24px; }
.footer  { grid-area: footer; }

回應式圖片庫（無 JS）

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.photo-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

---

Intrinsic Sizing：min-content 與 max-content

內在尺寸關鍵字

.intrinsic-grid {
  display: grid;
  /* min-content：取決於內容最小需求 */
  /* max-content：取決於內容最大需求 */
  grid-template-columns: min-content 1fr max-content;
}

.intrinsic-grid .label {
  background: #f0f0f0;
  padding: 4px 8px;
}

.intrinsic-grid .content {
  background: #e0e0e0;
  padding: 16px;
}

與 Subgrid 結合

.data-table {
  display: grid;
  grid-template-columns: max-content 1fr minmax(120px, max-content);
}

.data-row {
  display: grid;
  grid-template-columns: subgrid;
  /* 自動與表頭對齊 */
}

---

結語：CSS 正在接管曾經需要 JavaScript 的佈局

2026 年的 CSS Grid，生態已經相當成熟：

• Subgrid：穩定支援，解決了嵌套Grid 的對齊問題
• Grid-Lanes：仍在發展中，但方向已經明確
• 現代 gap：從 grid-gap 遷移到 gap 的最後階段

這些進化的方向很清晰：過去需要 JavaScript 才能做到的複雜排版，正在被 CSS 原生接管。Subgrid 讓組件之間的對齊不再需要 JavaScript 計算，Grid-Lanes 將讓 Masonry 佈局不再需要外部庫。

對於前端工程師來說，這意味著更少的相依性、更快的載入速度、以及更可維護的程式碼。

---

本文是「2026 CSS 實用技術」系列文章之一。