Grid 基礎

Grid 像是畫出表格框線再把元素放進格子，適合同時控制列與欄。 一開始只要設定欄數與間距，就能獲得整齊的版面。

基本三欄

不同比例欄寬

設定列高

AI 協作：學了這個，跟 AI 怎麼配合？

CSS Grid 是做複雜格線排版的利器。AI 可以幫你寫 Grid，但行列數量你來定。

你的人類優勢：

• 你知道版面要幾行幾列、每格多寬
• 你能畫出簡單的排版草圖，讓 AI 知道你要什麼

可以這樣跟 AI 說：

我要一個 Dashboard 排版：上方全寬的摘要列、下方左邊 2/3 放圖表、右邊 1/3 放排名。用 CSS Grid。

練習題