昨天我們學了 Flexbox，解決了很多像置中、平均分布這種以前很麻煩的排版問題。但如果整個網頁需要更完整的版面規劃，光靠 Flexbox 還是會有點吃力，這時候 Grid 就派上用場啦！

Grid 的概念很直覺，就像在畫格子表格一樣，先把畫面切成一格一格，再把元素放進去。它可以同時控制「橫的（row）」跟「直的（column）」，不像 Flexbox 只有一個方向。這代表我們可以用 Grid 來做三欄式的版型、圖片牆、甚至整個頁面的主要架構。

基本語法其實不難：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三欄 /
gap: 10px; / 格子之間的間距 */
}

這樣就能快速做出三欄的排版，而且還能設定每一欄要多寬、多高，要平均分布還是固定大小都可以。

我的心得
學完 Grid，我覺得它超適合用來做整體的版面規劃。以前要做複雜的排版，常常要用很多巢狀 div 搭配浮動或 Flexbox，搞得很複雜，現在直接用格線就能清楚安排。更酷的是，Grid 跟 Flexbox 其實可以搭配使用：像整體結構用 Grid 切好，再用 Flexbox 排裡面的細節，這樣排版起來就很靈活。

對我來說，Grid 就像是一個「大框架」，而 Flexbox 是「小助手」，兩個一起用，做出來的網頁不只整齊，也能因應不同的螢幕大小，算是往響應式設計（RWD）更進一步的基礎。