LESSON-09 · SELF-PACED PRACTICE

Grid 軌道、區域與內容尺寸

把「Grid 軌道、區域與內容尺寸」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

4個獨立主題3個練習階段1個整合挑戰

看見缺口 → 修改一小段 → 重新載入驗收

每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。

先知道今天要做什麼

不要從長篇名詞開始；先從第一個可完成的小任務開始。

從第一張卡開始，先閱讀任務情境與預期畫面。

打開 Starter 的實作檔，依 Step 逐步修改，不靠按鈕代做。

重新整理頁面，對照畫面、DOM、Computed、Console 或文件證據。

每張卡只練一個責任；完成後再進入下一張。

能分辨 grid-template 宣告的 explicit tracks 與放不下新 item 時由 Grid placement 建立的 implicit tracks。

要修改：files/starter/style.css

能以矩形 named areas 表達 header、sidebar、main 的版面責任，並讓各 item 對應正確區域。

要修改：files/starter/style.css

能區分容器的 align-items/justify-items 與單一 item 的 align-self/justify-self 覆寫。

要修改：files/starter/style.css

能用 minmax(0,1fr) 解除 1fr 的內容型最小限制，並對不可斷長字串提供斷點。

要修改：files/starter/style.css

把已完成的責任轉回本章完整作品，不把整合步驟冒充成單項教學。

在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。

完成具命名區域、隱式列與長內容安全的 Grid 版面。

如果你現在只想知道下一步，先做這件事。

開啟「explicit 與 implicit tracks」：先看 files/starter/style.css 的先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。，記錄目前狀態，再修改一小段。