昨天我們學了 Flexbox，發現它很適合排「一條線上的東西」，像是導覽列或橫向的卡片。但如果今天要排一整個「二維的版面」呢？
比如：部落格的主內容 + 側邊欄 + 標題區 + 頁尾...
這時候 Grid 就是最強大的工具啦！

什麼是 CSS Grid？

簡單來說：

• Flexbox = 一維排版（橫向或直向）
• Grid = 二維排版（可以同時控制橫向和直向）

Grid 就像一個「棋盤」，我們先把版面劃成格子，再把元素放到指定的格子裡。

Grid 的常用屬性

（1）容器屬性（外層要先 display: grid）

• grid-template-columns → 設定有幾欄，欄寬是多少

 ◦ grid-template-columns: 200px 200px 200px; → 三欄，每欄 200px
 ◦ grid-template-columns: 1fr 2fr; → 兩欄，右邊是左邊的兩倍大
 ◦ grid-template-columns: repeat(3, 1fr); → 三欄，平均分配

• grid-template-rows → 設定有幾列，高度是多少

 ◦ gap → 欄與列之間的間距
 ◦ gap: 20px;

（2）項目屬性（放在子元素上）

• grid-column → 控制這個項目橫向跨幾欄

 ◦ grid-column: 1 / 3; → 從第一欄跨到第三欄

• grid-row → 控制這個項目直向跨幾列

 ◦ grid-row: 1 / 2;

範例：基本三欄版面

html:

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

css:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header {
  grid-column: 1 / 3; /* 跨兩欄 */
  background: lightblue;
}

.sidebar {
  background: lightgreen;
}

.main {
  background: lightpink;
}

.footer {
  grid-column: 1 / 3; /* 跨兩欄 */
  background: lightgray;
}

結果：

• 上面是 Header，橫跨兩欄
• 左邊是 Sidebar，右邊是 Main
• 最下面 Footer 也橫跨兩欄

是不是很像部落格或新聞網站的版型？

小練習

今天試試看用 Grid 做：

1.三欄的產品展示（每個產品在一個格子裡）
2.一個「圖片牆」（像 Instagram）
3.一個簡單的報紙排版（標題、兩欄文字、側邊資訊）

🎯小結

• Grid 幫我們處理二維的排版，適合整個頁面或複雜的版型
• Flexbox 適合單一方向（橫向/直向）的排列
• 常用屬性：

    ◦grid-template-columns / grid-template-rows
    ◦gap
    ◦grid-column / grid-row
    

好的~ 今天學會了 CSS Grid排版技巧，加上之前的flexbox技巧，
恭喜你已經有基本網頁排版技能啦！
明天我們就來學習「RWD 響應式設計技巧」，
讓網頁視覺效果更上一層樓
不管在甚麼裝置都能使用😎
今天也謝謝你的收看>_<~
我是Ting，我們明天見!