一、為什麼 CSS Grid 會崛起？

過去在做網頁排版時，多數開發者會依賴 Bootstrap 的欄位系統（Grid System）來快速切版。但這種方式本質上仍是「一維布局」（row 或 column），在複雜版型下容易變得難以維護。

CSS Grid 則是一種「二維布局系統」，可以同時控制「列（row）」與「欄（column）」。這代表你不需要再透過巢狀 div 或 hack 技巧，就能精準定義每個區塊的位置。

簡單來說：

  • Bootstrap：偏向快速套版
  • CSS Grid：偏向精準設計

 

二、CSS Grid 基本概念快速入門

要使用 CSS Grid，其實只需要兩個核心概念：

1. Grid Container（容器）

 

.container {
  display: grid;
}

 

2. Grid Item（子元素）

當容器設定為 display: grid 後，裡面的所有子元素都會自動變成 Grid Item。

接著你可以定義欄與列：

 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

 

這段意思是：

  • 建立三欄
  • 每欄平均分配空間（fr 單位）
  • 間距 20px

這樣就能快速做出類似 Bootstrap 的三欄排版，但寫法更直覺。

 

三、進階排版：精準控制版面

CSS Grid 最強的地方在於「區域控制」。

你可以用 grid-column 和 grid-row 指定元素位置：

 

.item1 {
  grid-column: 1 / 3;
}

 

代表這個元素橫跨兩欄。

甚至可以使用 命名區域（grid-template-areas）：

 

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

 

這種寫法非常直覺，幾乎像在畫版面圖，對於設計師或協作開發來說極度友善。

 

四、CSS Grid vs Bootstrap：該怎麼選？

很多人會問：CSS Grid 這麼強，是不是可以完全取代 Bootstrap？

答案是：可以，但要看情境。

CSS Grid 優勢：

  • 不依賴框架，效能更好
  • 可讀性高，結構清晰
  • 適合客製化設計

Bootstrap 優勢：

  • 開發速度快
  • 有完整 UI 元件
  • 適合快速開案或後台系統

實務上常見的做法是：
👉 UI 用 Bootstrap
👉 排版用 CSS Grid

 

五、實戰建議：如何開始導入 CSS Grid？

如果你目前還在使用 Bootstrap，其實不用一次全部重構，可以這樣做：

1. 從新專案開始使用 Grid
避免舊架構干擾，學習效果最好

2. 小範圍替換
例如：首頁卡片區塊改用 Grid

3. 搭配 Flexbox 使用

  • Grid：負責整體布局
  • Flexbox：負責內部排列

這樣能發揮兩者最大優勢。

 

結語：未來排版的標準答案

CSS Grid 並不是單純「取代 Bootstrap」，而是代表網頁排版思維的進化。當你熟悉 Grid 後，會發現過去複雜的切版問題變得非常直覺。

如果你正在追求更高品質的網頁設計與開發效率，CSS Grid 絕對值得你投入學習。