CSS Grid 佈局完全攻略：從入門到複雜版面設計

CSS Grid 是現代網頁佈局的革命性工具，讓過去需要 float、position 或 flexbox 組合才能實現的複雜版面，現在用幾行 CSS 就能搞定。本文從基礎語法到進階技巧，帶你全面掌握 Grid 佈局。

Grid 基礎概念

Grid 系統由**容器（Container）和項目（Items）**組成。在容器上設定 display: grid 後，直接子元素自動成為 Grid 項目。

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 三欄：固定-彈性-固定 */
  grid-template-rows: auto 1fr auto;       /* 三列：自動-彈性-自動 */
  gap: 16px;                               /* 間距（同時設定行列） */
}

fr 單位與 repeat()

fr（fraction）代表可用空間的份額，repeat() 避免重複書寫：

/* 12 欄網格系統 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* 響應式卡片網格：最少 280px，自動填充 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

auto-fill 會盡量填充欄位，auto-fit 則會讓現有項目延伸填滿空間。

項目定位：grid-column 與 grid-row

.item-wide {
  grid-column: 1 / 3;    /* 從第 1 條線到第 3 條線（佔 2 欄） */
  /* 等同於：grid-column: span 2; */
}

.item-tall {
  grid-row: 1 / 4;       /* 佔 3 列 */
}

.hero-banner {
  grid-column: 1 / -1;   /* -1 代表最後一條線，跨越所有欄 */
}

具名網格區域

這是 Grid 最直觀的功能，用視覺化方式定義版面：

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 50px;
  min-height: 100vh;
  gap: 0;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

<div class="page-layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

響應式設計與 Grid

結合 Media Query 和 Grid，輕鬆實現響應式版面：

.article-layout {
  display: grid;
  gap: 24px;
  
  /* 手機：單欄 */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "toc"
    "footer";
}

@media (min-width: 768px) {
  .article-layout {
    /* 平板：兩欄 */
    grid-template-columns: 1fr 200px;
    grid-template-areas:
      "header header"
      "main   toc"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .article-layout {
    /* 桌面：三欄 */
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
      "header header  header"
      "toc    main    aside"
      "footer footer  footer";
  }
}

隱式網格

當項目超出定義的網格範圍時，Grid 會自動建立隱式軌道：

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 只定義欄，列由內容自動生成 */
  grid-auto-rows: 200px;  /* 每個隱式列高 200px */
  gap: 8px;
}

對齊控制

.grid-container {
  display: grid;
  
  /* 整個網格在容器中的對齊 */
  justify-content: center;   /* 水平對齊（start|end|center|space-between|space-around） */
  align-content: start;      /* 垂直對齊 */
  
  /* 所有項目在各自格子中的對齊 */
  justify-items: stretch;    /* 預設值，填滿格子寬度 */
  align-items: center;       /* 垂直置中 */
}

/* 單個項目覆蓋對齊方式 */
.special-item {
  justify-self: end;
  align-self: start;
}

實戰案例：雜誌式版面

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 200px);
  gap: 12px;
}

.article-featured {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.article-secondary {
  grid-column: 4 / 7;
  grid-row: 1 / 2;
}

.article-list {
  grid-column: 4 / 7;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.article-wide {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}

Grid vs Flexbox：如何選擇

場景	推薦
一維排列（導覽列、按鈕組）	Flexbox
二維版面（頁面佈局、卡片網格）	Grid
等高多欄卡片	Grid
元素間彈性間距	Flexbox
複雜頁面骨架	Grid

總結

CSS Grid 和 Flexbox 是互補的工具，而非競爭關係。Grid 擅長二維的版面控制，Flexbox 則在一維的對齊場景更直觀。在現代專案中，通常使用 Grid 建構整體頁面骨架，用 Flexbox 處理元件內部的排列。瀏覽器支援已達 98%+，可以放心在正式環境使用。