CHAPTER 07 · PRACTICE WORKSPACE
完成整齊且不溢出的作品卡片列表
TASK STATUS
修改檔案：style.css
完成後看見：作品卡片依寬度自動排成多欄
修改檔案：style.css
完成後看見：卡片之間留有整齊空隙
修改檔案：style.css
完成後看見：長網址會換行且不超出卡片
WORKSPACE
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
比較：gap 控制卡片彼此距離，padding 控制 Grid 與外框距離；需要分開觀察。
現在做：在 Checkpoint 1 的 DevTools 先保留 display: grid，加入 gap: 20px 並記錄卡片彼此的距離；移除 gap，改加 padding: 20px，比較卡片之間與 Grid 外框的距離；最後移除實驗 padding，只把 gap: 20px 寫回 .project-grid。
預期：能用前後畫面分辨 gap 只管理卡片彼此的列／欄距離，padding 管理 Grid 內容與外框的距離；最後只保留共同父層的 gap。
證據：截圖或口述需同時指出卡片間距、Grid 外框距離與 computed gap，並展示沒有用 padding 代替 gap。
比較：Grid 適合同時管理欄與列，Flex 適合單一方向；要依版面責任選工具。
現在做：在 Checkpoint 1 的 DevTools 暫時把 .project-grid 改成 display: flex、flex-wrap: wrap、gap: 20px，觀察卡片如何依單一主軸換行；再恢復 display: grid，保留 gap: 20px，重看列與欄同時受控的結果。
預期：能用同一組卡片指出 Flex 主要沿單一方向排列並換行，Grid 同時描述列與欄；工具選擇要回到卡片牆的二維責任，而不是只看畫面是否暫時排開。
證據：留下 Flex 與 Grid 的前後畫面或口述，標示 computed display、卡片列／欄位置與最後恢復的 Grid 規則。
完成條件：DONE-02：卡片之間留有整齊空隙
第 06 章交棒
上一章已完成橫向導覽與左右兩欄；本章把共同父層的排列責任擴成同時管理列與欄，並處理長內容。
整理品牌故事與商品特色。
https://portfolio.example.com/projects/coffee-brand-story-and-product-showcase清楚呈現活動資訊與報名流程。
查看作品整合文字、圖像與學習歷程。
查看作品這是本地練習目標；卡片連結都指向這個頁內區塊，長網址文字用來驗收卡片內換行，不需要連線。
CONTINUE
前往 Checkpoint 2，依要求完成「加入一致的卡片間距」。