建立自動換欄 Grid
卡片可依容器寬度從多欄縮成單欄。
CHAPTER 07 · 180 MINUTES
Grid 先畫格子，再讓卡片依空間自動入住
完成會隨寬度自動換欄、間距一致，而且長網址不會衝破邊界的作品卡片牆。
3個明確任務
2個接回點
3種測試寬度
LEARNING GOALS
本章結束時，你能做出什麼
統一列欄間距
用 gap 管理整面卡片牆，不逐張推位置。
找出真正溢出者
長網址會換行且完整保留，不用 hidden 把內容切掉。
進場檢核與作品接力
- 具備第 06 章成果：完成橫向導覽列與左右排列介紹區：不看答案，展示或口述第 06 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 06 章產物：完成橫向導覽列與左右排列介紹區
本章輸出：完成整齊且不溢出的作品卡片列表
產物類型：mainline；後續用途：第 08 章
PROBLEM & ANALOGY
卡片一多，為什麼欄寬混亂又衝出畫面？
Flex 像排隊；Grid 像先畫好置物櫃格子，再把作品卡片放進去。長網址則像過長物品，要讓它能折放，而不是把櫃門切掉。
本章要解決：固定欄數在窄畫面過擠、每張卡間距不一致，以及不含空白的網址撐破卡片。
接住上一章：Flex 已能管理一條隊伍，這次處理同時需要列與欄對齊的作品列表。
把名詞對回畫面與程式
- grid container
- 同時管理列與欄的共同父層。
- auto-fit
- 可用空間變化時自動決定能放幾欄。
- minmax
- 替每欄設定可接受的最小與最大寬度。
- gap
- 同時管理網格列距與欄距。
- .project-link
- 可能撐破卡片的長內容，應在最小責任範圍處理。
SCOPE
今天的學習邊界
能自己完成
grid container、欄、gap、repeat、minmax、auto-fit 與基本 overflow 排查。
看得懂即可
固定三欄與自動換欄的差異，以及內容是否有斷行機會。
刻意延後
命名網格線、複雜跨列定位與 masonry。
CORE IDEAS
三個核心觀念
-
repeat(auto-fit, minmax(...))讓欄數由可用空間決定，不需替每種寬度手算欄數。 gap同時管理列與欄的共同間距。- 溢出時要找出真正撐破邊界的子元素，修正最小責任範圍，不把整個容器裁掉。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把換行規則加在 grid container，而不是長網址連結，觀察問題仍留在卡片內。
- 縮小視窗，先穩定重現溢出。
- 用元素檢查器找出真正超出邊界的元素。
- 確認網格欄設定允許收縮。
-
檢查長內容是否有斷行機會，把修正放在
.project-link後重測多個寬度。
欄數在手機擠爆
先查：先查是否仍寫死三欄，再看 repeat、auto-fit 與 minmax。
卡片間距不一致
先查：確認 gap 寫在 grid container，不要用多份 margin 補洞。
長網址推出畫面
先查：在窄視窗找出真正超出的 link，再給它合理斷行機會。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我已找到作品列表的 grid container。
- 我知道欄數應由可用寬度決定。
- 我會用 gap 管理共同間距。
- 我會用桌機、平板、手機三種寬度測試溢出。
建立自動調整欄數的 Grid
檔案：style.css
位置：.project-grid
結果：作品卡片依寬度自動排成多欄
加入一致的卡片間距
檔案：style.css
位置：.project-grid
結果：卡片之間留有整齊空隙
處理過長網址溢出
檔案：style.css
位置：.project-link
結果：長網址會換行且不超出卡片
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我的 grid container 是 ______；欄數由 ______ 決定；溢出的真正元素是 ______，我用 ______ 修正。
不要用 overflow:hidden 把問題藏起來；要能指出是內容子元素撐破卡片。
提交桌機、平板、手機三種寬度截圖，網址全文必須仍可讀。
下一章：替卡片加入角落標籤，並讓返回按鈕固定在視窗右下角。