學習目標

• 了解 Grid 與 Flexbox 的差異與應用場景
• 學會使用 display: grid 建立二維布局
• 練習 grid-template-columns 與 grid-template-rows 的設定
• 使用 gap 控制網格間距
• 嘗試 grid-column、grid-row 控制跨欄與跨列

body {
  font-family: "Microsoft JhengHei", sans-serif;
  background: #f8f9fa;
  margin: 40px;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 80px 300px 80px;
  gap: 10px;
}

.item {
  background: #3498db;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

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

.item4 {
  grid-column: 1 / 3;
  background: #2ecc71;
}

學習目標

• 了解 Grid 與 Flexbox 的差異與應用場景
• 學會使用 display: grid 建立二維布局
• 練習 grid-template-columns 與 grid-template-rows 的設定
• 使用 gap 控制網格間距
• 嘗試 grid-column、grid-row 控制跨欄與跨列

常見錯誤與修正

• ❌ 把 Grid 當成 Flex 用 → ✅ Grid 是「二維」，Flex 是「一維」
• ❌ 只設定欄卻忘了列 → ✅ 使用 grid-template-rows 定義完整結構
• ❌ 忘記 gap → ✅ 用 gap 控制間距，比 margin 更穩定
• ❌ 跨欄寫錯範圍 → ✅ 使用 grid-column: 起點 / 終點

今日小挑戰（可交付）

• [ ] 建立一個二欄三列的 Grid 版面
• [ ] 嘗試用 grid-column 跨兩欄
• [ ] 練習 gap 的設定效果
• [ ] 修改行列比例（如 1fr 2fr 1fr）
• [ ] 試著在 Grid 內嵌 Flexbox 做複合布局

DAY28 心得

今天正式接觸 Grid 布局，感覺就像是 Flexbox 的進階版。它不只是橫向或縱向的排列，而是能同時控制「列」與「欄」的二維空間。當我第一次看到 grid-template-columns: 1fr 3fr; 時，真的覺得排版的自由度瞬間提升好幾倍。

在實作中，我最喜歡 gap 屬性，它能讓整個版面保持呼吸感，不用再為 margin 苦惱。grid-column 與 grid-row 的跨欄設定，也讓我理解了「空間邏輯」的重要性。

相較於 Flexbox 注重「排列關係」，Grid 更像是在設計一個版面藍圖。這讓我開始理解專業網頁排版的思維：不是硬塞內容，而是先規劃區域。

今天的學習讓我感覺 CSS 終於進入另一個層次。從文字、顏色、定位、再到布局，所有知識正在慢慢串起來。