零基礎前端課程

CHAPTER 07 · 180 MINUTES

Grid 先畫格子，再讓卡片依空間自動入住

完成會隨寬度自動換欄、間距一致，而且長網址不會衝破邊界的作品卡片牆。

3個明確任務
2個接回點
3種測試寬度

LEARNING GOALS

本章結束時，你能做出什麼

01

建立自動換欄 Grid

卡片可依容器寬度從多欄縮成單欄。

02

統一列欄間距

用 gap 管理整面卡片牆，不逐張推位置。

03

找出真正溢出者

長網址會換行且完整保留，不用 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

三個核心觀念

  1. repeat(auto-fit, minmax(...)) 讓欄數由可用空間決定，不需替每種寬度手算欄數。
  2. gap 同時管理列與欄的共同間距。
  3. 溢出時要找出真正撐破邊界的子元素，修正最小責任範圍，不把整個容器裁掉。

DEBUG

錯誤觀察與排查順序

課堂刻意錯誤：把換行規則加在 grid container，而不是長網址連結，觀察問題仍留在卡片內。

  1. 縮小視窗，先穩定重現溢出。
  2. 用元素檢查器找出真正超出邊界的元素。
  3. 確認網格欄設定允許收縮。
  4. 檢查長內容是否有斷行機會，把修正放在 .project-link 後重測多個寬度。
症狀 01

欄數在手機擠爆

先查：先查是否仍寫死三欄，再看 repeat、auto-fit 與 minmax。

症狀 02

卡片間距不一致

先查：確認 gap 寫在 grid container，不要用多份 margin 補洞。

症狀 03

長網址推出畫面

先查：在窄視窗找出真正超出的 link，再給它合理斷行機會。

PRACTICE CONTRACT

Starter 到 Solution 是同一份骨架，任務一路加厚

開始前先確認這四件事

  • 我已找到作品列表的 grid container。
  • 我知道欄數應由可用寬度決定。
  • 我會用 gap 管理共同間距。
  • 我會用桌機、平板、手機三種寬度測試溢出。
TASK-01

建立自動調整欄數的 Grid

檔案：style.css

位置：.project-grid

結果：作品卡片依寬度自動排成多欄

TASK-02

加入一致的卡片間距

檔案：style.css

位置：.project-grid

結果：卡片之間留有整齊空隙

TASK-03

處理過長網址溢出

檔案：style.css

位置：.project-link

結果：長網址會換行且不超出卡片

  1. 先讀任務 Starter 先畫桌機、平板、手機欄數。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

我的 grid container 是 ______；欄數由 ______ 決定；溢出的真正元素是 ______，我用 ______ 修正。

不要用 overflow:hidden 把問題藏起來；要能指出是內容子元素撐破卡片。

提交桌機、平板、手機三種寬度截圖，網址全文必須仍可讀。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：替卡片加入角落標籤，並讓返回按鈕固定在視窗右下角。

下一步：前往第 08 章「Position、fixed 與 z-index 排錯」，帶著本章輸出繼續累積作品。