CSS Grid 佈局完全指南

CSS Grid 是現代網頁佈局的革命性技術。它讓我們能夠輕鬆創建複雜的二維佈局，而不需要使用浮動或定位技巧。

為什麼選擇 Grid？

相比 Flexbox，Grid 在處理二維佈局時更加直觀：

• 二維控制：同時處理行和列
• 響應式友善：內建的自動調整功能
• 語義清晰：命名網格區域讓代碼更易讀

基礎概念

Grid Container 和 Grid Items

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

這段代碼創建了一個三欄等寬的網格，欄位間距為 1rem。

網格軌道（Grid Tracks）

軌道是行或列的通稱。我們可以用多種方式定義：

/* 固定尺寸 */
grid-template-columns: 200px 200px 200px;

/* 彈性尺寸 */
grid-template-columns: 1fr 2fr 1fr;

/* 混合使用 */
grid-template-columns: 200px 1fr 200px;

/* 重複模式 */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

實用技巧

1. 卡片網格佈局

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

這會自動根據容器寬度調整卡片數量，每張卡片最小 300px。

2. 聖杯佈局

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

3. 響應式圖片畫廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 1rem;
}

.gallery-item:nth-child(3n) {
  grid-column: span 2;
  grid-row: span 2;
}

Grid vs Flexbox

何時使用 Grid？何時使用 Flexbox？

使用 Grid 當：

• 需要二維佈局（行和列）
• 需要精確控制元素位置
• 創建整體頁面佈局

使用 Flexbox 當：

• 只需要一維佈局
• 需要內容自動換行
• 創建導航欄或工具列

常見問題

1. 為什麼 gap 不起作用？

確保你使用的是 gap 而不是舊語法 grid-gap：

/* ✅ 推薦 */
gap: 1rem;

/* ⚠️ 舊語法（仍可用但不推薦） */
grid-gap: 1rem;

2. 如何讓網格項目填滿容器？

使用 grid-auto-rows: 1fr 或設定最小高度：

.grid {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
}

3. 如何處理不規則佈局？

結合 grid-column 和 grid-row 的 span 功能：

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

瀏覽器支援

CSS Grid 在現代瀏覽器中有良好支援：

• Chrome 57+
• Firefox 52+
• Safari 10.1+
• Edge 16+

對於舊瀏覽器，可以使用 @supports 查詢提供降級方案：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

/* 降級方案 */
.container {
  display: flex;
  flex-wrap: wrap;
}

總結

CSS Grid 是現代網頁開發者的必備技能。透過掌握基礎概念和實用技巧，你可以創建出既美觀又高效的網頁佈局。從簡單的卡片網格開始，逐步挑戰更複雜的佈局設計。