正在準備工作環境...
Grid 實戰版型
Grid 可拼出複雜版型：聖杯佈局、儀表板、多欄圖片牆。 掌握區塊命名與跨欄跨列，重組版面很省力。
聖杯佈局
Dashboard Cards
自動填充圖片牆
AI 協作：學了這個，跟 AI 怎麼配合？
Grid 實戰：相片牆、Dashboard、雜誌排版。把你想要的效果描述出來，AI 幫你實現。
你的人類優勢：
- 你能找到參考網站截圖，讓 AI 照著做
- 你能微調格線間距、元素大小，直到視覺滿意為止
可以這樣跟 AI 說：
幫我做一個像 Pinterest 的瀑布流排版，3 欄，圖片高度不一，自動填滿空間。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
挑戰任務
Task 1
用 grid-template-areas 完成聖杯佈局，左右欄 200px，中間自適應，含 header/footer
Task 2
做一個 4 欄 dashboard，部分卡片跨兩欄以放大重點數據
Task 3
建立自動填充的圖片牆，最小寬度 160px，超過時自動換行
← BackNext Lesson →