為什麼要學 Grid？

Flexbox 雖然好用，但它更適合「一維排列」(row 或 column)。
當你需要「二維布局」（像是網頁首頁、儀表板、多欄內容），Grid 才是最強工具。

Grid 的基本概念

只要在父容器加上display: grid;，子元素就會變成「網格項目 (grid items)」。

.container {
  display: grid; /* 啟用 Grid */
}

常用屬性整理

父容器 (Grid Container)

• grid-template-columns：定義列的寬度

grid-template-columns: 200px 200px 200px; /* 固定三欄 */
grid-template-columns: 1fr 1fr 1fr; /* 三欄等分 */
grid-template-columns: repeat(3, 1fr); /* 更簡潔的三等分 */

• grid-template-rows：定義行的高度

grid-template-rows: 100px 200px;

• gap：設定格子之間的間距

gap: 10px; /* row 與 column 間距 */
row-gap: 20px;
column-gap: 15px;

• justify-items / align-items：子元素在格子內的對齊
  • start | end | center | stretch
• justify-content / align-content：整個 Grid 的對齊方式

子元素 (Grid Item)

• grid-column：橫向跨欄

grid-column: 1 / 3; /* 從第1欄跨到第3欄 */

• grid-row：縱向跨行

grid-row: 2 / 4; /* 從第2行跨到第4行 */

範例：三欄 RWD 卡片區塊

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.box {
  background: #6a5acd;
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 30px;
  border-radius: 8px;
}

👉 auto-fit + minmax 就能做到自動換行的 RWD 卡片。

小練習 💡

1. 做一個三欄式文章排版：左邊 Sidebar、中間內容、右邊資訊欄。
2. 做一個相片牆 (Photo Gallery)，自動調整每列圖片數量，支援 RWD。

👀 下一步（Day 9）我們會實戰Flexbox vs Grid混搭，做一個完整的頁面 Layout（Header + Sidebar + Main + Footer）。