CHAPTER 07 · PRACTICE WORKSPACE
完成整齊且不溢出的作品卡片列表
TASK STATUS
修改檔案：style.css
完成後看見：作品卡片依寬度自動排成多欄
修改檔案：style.css
完成後看見：卡片之間留有整齊空隙
修改檔案：style.css
完成後看見：長網址會換行且不超出卡片
WORKSPACE
先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
比較：grid-template-columns 決定欄列結構，單一卡片 width 不應破壞整組自動排列。
現在做：在 DevTools 先對 .project-grid 暫時加入 display: grid、grid-template-columns: repeat(3, 1fr)；再只對第一張 .project-card 加 width: 320px，觀察欄列結構與單一卡片寬度各自造成什麼變化。移除 width 後，把欄位規則留在共同父層，最後改回標準的 repeat(auto-fit, minmax(240px, 1fr))。
預期：能用前後畫面指出 grid-template-columns 決定整組欄列，單一卡片 width 只改自己的盒子且可能破壞一致欄寬；最後的欄位責任應留在 .project-grid。
證據：截圖或口述同時標示 .project-grid 的 computed display、grid-template-columns，以及第一張卡暫時 width 的差異，並展示最後移除單卡 width。
比較：auto-fit／minmax 能讓欄數依容器寬度變化，固定欄數則容易在窄畫面溢出。
現在做：在 Starter 的 DevTools 先暫時把 .project-grid 設成 display: grid、grid-template-columns: repeat(3, 1fr)，將視窗縮到 390px，記錄固定三欄造成的擠壓或溢出；再改成 repeat(auto-fit, minmax(240px, 1fr))，相同寬度重跑，最後保留標準自適應規則。
預期：能以同一個 390px 寬度比較固定三欄與 auto-fit／minmax：前者把欄位硬塞在窄空間，後者改用可容納的欄數；能說出 auto-fit 調整的是欄位，不是單一卡片的 width。
證據：留下同一視窗寬度的兩張截圖或口述，並指出 computed grid-template-columns、欄數與頁面是否出現水平捲動的差異。
完成條件：DONE-01：作品卡片依寬度自動排成多欄
第 06 章交棒
上一章已完成橫向導覽與左右兩欄；本章把共同父層的排列責任擴成同時管理列與欄，並處理長內容。
整理品牌故事與商品特色。
https://portfolio.example.com/projects/coffee-brand-story-and-product-showcase清楚呈現活動資訊與報名流程。
查看作品整合文字、圖像與學習歷程。
查看作品這是本地練習目標；卡片連結都指向這個頁內區塊，長網址文字用來驗收卡片內換行，不需要連線。
CONTINUE
前往 Checkpoint 1，依要求完成「建立自動調整欄數的 Grid」。