| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .project-grid | 作品卡片依寬度自動排成多欄 |
| TASK-02 | DONE-02 | style.css | .project-grid | 卡片之間留有整齊空隙 |
| TASK-03 | DONE-03 | style.css | .project-link | 長網址會換行且不超出卡片 |
第 06 章的 Flex 版面以新的「卡片牆」作品區接棒;四個階段都會顯示「第 06 章交棒」與本地 #project-details 目標,練習連結不使用 href="#"。
六個 microLab 的比較位置:TASK-01 是「欄數 vs 卡片寬度」與「auto-fit vs 固定欄數」;TASK-02 是「gap vs padding」與「Grid vs Flex」;TASK-03 是「overflow-wrap vs overflow hidden」與「長網址 vs 一般文字」。每個實驗都要留下操作前後與 selector/computed style 證據。
標準答案保留網址全文,不用 overflow:hidden 把問題藏起來;TASK-04 另要求新增至少四筆真實卡片資料,並以寬版、窄版與長標題證明 Grid 規則可轉移。