CSS Grid 切版教學：從入門到實戰

每次看到那些排版精美的網站，你有沒有好奇過它們的版面是怎麼切出來的？在 CSS Grid 出現之前，我們用 float、inline-block、甚至各種 hack 手段來排版，那段日子真的不堪回首。現在有了 CSS Grid，不管是簡單的兩欄式佈局，還是複雜的雜誌風格版面，都能輕鬆搞定。今天就讓我帶你從最基礎的概念開始，一路走到能實際應用的程度。

CSS Grid 是什麼

CSS Grid Layout 是一套二維的排版系統。注意這個「二維」——這是它跟 Flexbox 最根本的區別。Flexbox 本質上是一維的，它一次只能處理一個方向（水平或垂直）的排列。但 CSS Grid 可以同時控制行和列，讓你在二維平面上精確地安排每個元素的位置。

打個比方，如果 Flexbox 是一條繩子，你可以把東西一個接一個地掛在上面；那 CSS Grid 就是一張棋盤，你可以把每個棋子放在任何你想放的格子裡。兩者各有所長，不是互相取代的關係。實務上，我通常在大框架的佈局用 Grid，在元件內部的排列用 Flexbox，這樣搭配起來特別順手。

2026 年的瀏覽器對 CSS Grid 的支援已經非常完善了，包括比較新的 Subgrid 功能，所有主流瀏覽器都已經支援。你可以放心地在生產環境中使用，不需要擔心相容性問題。

基本術語與概念

在開始寫程式碼之前，先搞清楚幾個基本術語。這些術語聽起來可能有點枯燥，但理解了之後，後面的內容就會輕鬆很多。

Grid Container（網格容器）：設定了 display: grid 的元素，就是一個 Grid Container。它的直接子元素會自動變成 Grid Items。

Grid Item（網格項目）：Grid Container 的直接子元素。注意是「直接」子元素，孫元素不算。

Grid Line（網格線）：構成網格結構的分隔線，包括水平線和垂直線。線的編號從 1 開始，而不是從 0 開始。

Grid Track（網格軌道）：兩條相鄰網格線之間的空間，簡單來說就是一行或一列。

Grid Cell（網格格子）：兩條相鄰水平線和兩條相鄰垂直線圍成的空間，就是最小的網格單位。

Grid Area（網格區域）：一個或多個 Grid Cell 組成的矩形區域。

grid-template-columns 與 rows

最常用的兩個屬性就是 grid-template-columns 和 grid-template-rows。它們分別定義了網格的欄和列。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
}

這段程式碼建立了一個三欄三列的網格。兩邊的欄各寬 200px，中間的欄佔據剩餘空間（1fr）。行的部分也類似，上面 80px 給 header，中間自適應給內容區域，下面 60px 給 footer。

你也可以用 repeat() 函式來簡化重複的定義。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分 */
  grid-template-columns: repeat(4, 200px); /* 四個 200px 的欄 */
  grid-template-columns: repeat(2, 1fr 2fr); /* 交替寬度：1fr 2fr 1fr 2fr */
}

repeat() 的好處是當你需要很多欄的時候不用寫一長串。我曾經看過有人手寫了 12 個 1fr，改成 repeat(12, 1fr) 清爽多了。

fr 單位與彈性佈局

fr 是 CSS Grid 引入的一個特別好用的單位，全名是 fraction（份額）。它代表的是可用空間的一個比例。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

在這個例子中，容器的空間會被分成 4 份（1+2+1），左欄和右欄各佔 1 份，中間欄佔 2 份。如果容器寬度是 800px，那左右各 200px，中間 400px。

fr 跟百分比的區別在於，fr 是在扣除固定大小的軌道之後才分配的。舉個例子：

.container {
  display: grid;
  grid-template-columns: 300px 1fr 2fr;
  width: 900px;
}

這種情況下，先扣掉 300px 的固定欄，剩下 600px 再按 1:2 的比例分配，所以第二欄 200px、第三欄 400px。如果用百分比的話，就得自己算，而且容器寬度一變就要重新算，非常麻煩。

另外，fr 搭配 minmax() 函式可以設定軌道的最小和最大寬度，這在響應式設計中特別有用。

.container {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

每個欄的最小寬度是 250px，最大寬度是 1fr。這樣在大螢幕上三欄等寬，在小螢幕上每欄至少保持 250px 的寬度。如果你想搭配Tailwind CSS 響應式設計教學來學習，可以了解如何在 utility-first 框架中運用 Grid 的概念。

gap 間距設定

gap 屬性用來設定網格項目之間的間距，它是 row-gap 和 column-gap 的簡寫。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 行列間距都是 20px */
  gap: 20px 30px; /* 行間距 20px，列間距 30px */
  row-gap: 20px; /* 只設定行間距 */
  column-gap: 30px; /* 只設定列間距 */
}

以前要在 Grid 項目之間加間距，得用 margin，然後處理邊緣項目的 margin 問題（第一個和最後一個不要有外側的 margin），超級煩人。gap 直接解決了這個問題——它只在項目「之間」加間距，邊緣不會有多餘的空白。太舒服了。

grid-area 區域命名

這是我個人覺得 CSS Grid 最優雅的功能之一。你可以用可讀的名稱來定義網格區域，然後把元素放到對應的區域裡。

.container {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 16px;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

看到了嗎？grid-template-areas 就像是在畫一幅 ASCII 藝術畫，直接用文字描述版面結構。哪個區域佔哪些格子，一目瞭然。而且要修改版面的時候，只要改這幾行字串就好，不用去動 HTML 的結構。

如果某些格子不需要放東西，可以用點（.）來表示空白區域：

grid-template-areas:
  "header header header"
  "sidebar content ."
  "footer footer footer";

auto-fill 與 auto-fit 差異

這兩個關鍵字經常讓人搞混，但它們的差異其實很簡單。兩者都用在 repeat() 函式中，讓瀏覽器自動決定要放多少欄。

/* auto-fill：用空軌道填滿剩餘空間 */
.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit：把剩餘空間分配給現有項目 */
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

差異在於：當容器的空間足夠放更多欄，但實際的項目不夠多的時候，auto-fill 會建立空的軌道來佔位，而 auto-fit 會把多餘的空間分配給已有的項目，讓它們變得更寬。

在大多數情況下，你想用的是 auto-fit，因為它會讓項目自動填滿整個容器寬度，視覺效果比較好。auto-fill 則適合你希望項目保持固定寬度、不要被拉伸的情境。

Subgrid 完整支援

Subgrid 是 CSS Grid Level 2 的重頭戲，到了 2026 年終於在所有主流瀏覽器都獲得了完整支援。它解決了一個長期以來的痛點：巢狀 Grid 的對齊問題。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 佔三行 */
}

在沒有 Subgrid 之前，你如果想讓一排卡片的標題、內容、按鈕分別對齊，幾乎是不可能的任務。每張卡片的標題長度不同，內容高度不同，按鈕就會亂跑。有了 Subgrid，子元素可以直接使用父元素的網格軌道，完美對齊。

Subgrid 對於設計系統來說尤其重要。當你需要確保整個頁面的元素都能精確對齊到同一套網格系統時，Subgrid 就是你的最佳夥伴。如果你有使用暗色模式的需求，搭配Tailwind CSS 暗色模式教學一起學習，可以打造出更專業的 UI。

實戰切版範例

學了這麼多理論，來做一個實際的範例吧。我們來切一個典型的部落格首頁版面：上方有一個全寬的 hero 區域，中間是主要內容區加側邊欄，下面是三欄的特色文章區塊。

.blog-layout {
  display: grid;
  grid-template-columns: 1fr min(720px, 100%) 300px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ". hero hero ."
    ". main sidebar ."
    ". featured featured .";
  gap: 24px 32px;
  padding: 0 16px;
}

.hero { grid-area: hero; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }

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

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "main"
      "sidebar"
      "featured";
  }
}

這個範例展示了幾個實用的技巧。首先，用兩邊的 1fr 來建立自動的邊距，讓內容區域維持在頁面中央。min(720px, 100%) 確保主內容區最寬 720px，但在小螢幕上不會超出視窗。

特色文章區塊用了 auto-fit 搭配 minmax()，在不同螢幕寬度下自動調整欄數。大螢幕三欄、中螢幕兩欄、小螢幕一欄，完全不需要額外的 media query。

響應式的部分只用了一個簡單的 media query，把所有區域改成單欄排列。Grid 的好處就是你只要改 grid-template-areas，HTML 完全不用動。如果你正在用 React 開發前端，可以參考React 19 新功能教學來搭配 CSS Grid 打造更好的元件架構。

常見錯誤與最佳實踐

分享幾個我在實務中常看到的錯誤和對應的最佳實踐。

第一，不要過度使用固定寬度。很多人剛開始用 Grid 的時候習慣寫 grid-template-columns: 200px 400px 200px，全部都用固定像素值。這樣做出來的版面在大螢幕上會有很多空白，在小螢幕上可能會超出視窗。盡量用 fr 和 minmax() 來保持彈性。

第二，Grid 和 Flexbox 不是非此即彼的選擇。Grid 適合整體頁面佈局和二維排列，Flexbox 適合一維的內容流動。兩者搭配使用才是最佳實踐。比如整個頁面用 Grid 切大區塊，導覽列裡面的選項用 Flexbox 來排列。

第三，注意隱式網格的行為。當 Grid 項目超出你定義的範圍時，Grid 會自動建立額外的軌道（隱式軌道）。你可以用 grid-auto-rows 和 grid-auto-columns 來控制這些隱式軌道的大小。

第四，善用瀏覽器的開發者工具。Chrome 和 Firefox 都提供了非常好用的 Grid 視覺化工具，可以讓你看到網格線、區域名稱、軌道大小等資訊。遇到排版問題的時候，先打開 Grid Inspector 看看，通常很快就能找到問題所在。

CSS Grid 是現代前端開發者必須掌握的技能。它不只讓你的程式碼更簡潔，也讓你有能力實現以前不可能（或非常困難）的版面設計。現在就開始在你的下一個專案中使用它吧，相信你很快就會愛上它的。