Day 4：CSS Grid：二維排版

2025 iThome 鐵人賽

DAY 4

Modern Web

Modern Web：從基礎、框架到前端學習系列第 4 篇

17th鐵人賽

zoeeyee

2025-09-18 00:49:10

61 瀏覽

分享至

昨天我們聊了 Flexbox，解決了一維排版的問題（水平或垂直）。
但當畫面需要同時管理「列與行」時，Flexbox 就不太好處理了。
這時候，CSS Grid 就登場了！

為什麼需要 CSS Grid？

Flexbox → 適合「一條線」的排版（水平 or 垂直）。
Grid → 適合「二維」排版（同時處理列與行）。

舉例來說：

三欄式網站 → Flexbox 可以處理。
完整的排版格線（像報紙、照片牆） → Grid 更直覺！

啟用 Grid

要使用 Grid，只需要在父容器設定：

.container {
  display: grid;
}

然後透過 grid-template-columns 與 grid-template-rows 來定義格線。

基本屬性

父容器 (Container)

display: grid; → 啟用 grid
grid-template-columns → 定義欄位數量與寬度
grid-template-rows → 定義列數與高度
gap → 設定格子間距（取代舊的 grid-gap）
grid-template-areas → 直接定義版面結構（用字串表示）

子項目 (Item)

grid-column → 橫向跨欄
grid-row → 縱向跨列
grid-area → 對應 grid-template-areas

範例 1：簡單三欄

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Grid 三欄範例</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 三欄等分 */
      gap: 10px;
      padding: 20px;
      background: #eee;
    }
    .box {
      background: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

這樣就能快速建立三欄等分排版。

範例 2：報紙式排版

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Grid 複雜範例</title>
  <style>
    .container {
      display: grid;
      grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
      grid-template-columns: 200px 1fr;
      grid-template-rows: 80px 1fr 60px;
      height: 100vh;
      gap: 10px;
    }
    .header { grid-area: header; background: #2196F3; }
    .sidebar { grid-area: sidebar; background: #FF9800; }
    .main { grid-area: main; background: #4CAF50; }
    .footer { grid-area: footer; background: #9C27B0; }
    .box { color: white; padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header box">Header</div>
    <div class="sidebar box">Sidebar</div>
    <div class="main box">Main Content</div>
    <div class="footer box">Footer</div>
  </div>
</body>
</html>

這樣就能用 Grid 定義出頁首、側邊欄、主內容、頁尾，整個版面結構一目了然。