昨天我們學會了用 Flexbox 輕鬆搞定單向的對齊與排版，但如果要製作那種像雜誌封面、或者是很多欄位的複雜網格排版（例如相簿藝廊），用 Flexbox 可能就要寫好幾個巢狀容器。

這時候，我們就需要請出網頁排版的另一位重量級大師——CSS Grid（網格系統）！

如果把 Flexbox 比喻成「排隊隊伍」，那 Grid 就是一張「精準的方格棋盤」。對於習慣在平面設計中運用格線系統（Grid System）的設計師來說，Grid 簡直是工程界最浪漫的發明！

什麼是 CSS Grid？二維的排版魔法

• Flexbox 是一維的（1D）： 只能管同一行或同一列
• Grid 是二維的（2D）： 同時管「行（Rows）」跟「列（Columns）」，你可以同時切分橫向與縱向的空間
  要召喚 Grid 網格一樣很簡單，只要在容器上設定：

.grid-container {
    display: grid;
    /* 切出 3 個均等寬度的欄位 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; /* 格子跟格子間的間距 */
}

為什麼設計師會愛死 Grid？

1. 神奇的 fr 單位（Fraction，比例單位）：

• 以前算百分比常常要算到小數點後面好幾位（像是 33.333%），但在 Grid 裡，你可以直接寫 grid-template-columns: 1fr 2fr 1fr;，它就會自動幫你按比例分配寬度，就像排版軟體裡的等比分配一樣直覺！

2. 直覺的間距控制（gap）：

• 只要一行 gap: 20px;，所有格子之間的間距就自動長出來了，再也不用痛苦地去算 margin 要加在哪個邊緣。

3. 區塊自由命名與定位（Grid Areas）：

• 你甚至可以像畫草圖一樣，直接在 CSS 裡規劃「這裡放 Banner、這裡放側邊欄、這裡放內文」，把整個畫面的區塊配置得清清楚楚。

今日小結

今天我們認識了二維排版的霸主 CSS Grid，學會了用 grid-template-columns 跟神奇的 fr 單位來切格子。

到目前為止，我們已經把 HTML 骨架、CSS 上妝、盒模型、Flexbox 與 Grid 這些排版核心都走過一遍啦！
明天，我們就要把這些觀念全部融會貫通，迎來第一週的重頭戲——動手刻出第一張漂亮的個人名片卡片！