CHAPTER 07 · PRACTICE WORKSPACE

Grid 卡片牆、換行與 overflow

完成整齊且不溢出的作品卡片列表

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

建立自動調整欄數的 Grid

修改檔案:style.css

完成後看見:作品卡片依寬度自動排成多欄

TASK-02稍後處理

加入一致的卡片間距

修改檔案:style.css

完成後看見:卡片之間留有整齊空隙

TASK-03稍後處理

處理過長網址溢出

修改檔案:style.css

完成後看見:長網址會換行且不超出卡片

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼,再從 TASK-01 開始修改。

我的作品

活動報名頁

清楚呈現活動資訊與報名流程。

查看作品

個人介紹頁

整合文字、照片與學習歷程。

查看作品

CONTINUE

開始 TASK-01

下載版只包含 Starter;完成本頁操作後,請回線上教材進入 Checkpoint 1。

回到本頁 Starter 工作區(進入 Checkpoint 1 請回線上教材)