LESSON-09 · TOPIC 03

Grid item 對齊

能區分容器的 align-items/justify-items 與單一 item 的 align-self/justify-self 覆寫。

code-editGrid 軌道、區域與內容尺寸｜Grid item 對齊本頁只練一個責任

本頁只練什麼

能區分容器的 align-items/justify-items 與單一 item 的 align-self/justify-self 覆寫。

把 self 規則寫在容器或把 items 規則寫在 item，會讓對齊看似無效並引發多餘的 position/margin 修補。

要修改的檔案：files/starter/style.css

定位：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。｜依 starter-3 定位，只修改「Grid item 對齊」的責任。

任務情境

先結果，再原理；完成後要能說出自己看見的證據。

現在的問題

三張方案卡都要拉滿列高，只有推薦 CTA 要貼齊 cell 底部。

起始狀態：container align-items:stretch；推薦 item align-self:auto。

完成後要看到

runtime 的 align-self 由 auto 變 end；其他 items 仍依容器 align-items:stretch。

驗收證據：runtime before=auto、after=end、property=align-self；其他 item computed align-self 仍為 auto

何時會用到

同一 Grid 內大多數卡片使用共同對齊，只有推薦卡、徽章或 CTA 需要例外時。

常見混淆：align-content/justify-content 對齊的是整個 tracks 集合，不是單一 item 在 cell 裡的位置。

觀念與最小範例

這段程式是理解起點，不是要你直接跳過 Starter。

Grid item 對齊 Grid item alignment

items 是老師對全班的規則，self 是某一位同學自己的例外。

正式說法：align-items/justify-items set the default self-alignment for all grid items on block/inline axes；align-self/justify-self override an individual item。

.grid{align-items:stretch;justify-items:start}.featured{align-self:end}

三步完成本主題

每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。

Step 1｜先看見目前缺口，不急著貼答案。
檔案：files/starter/style.css　定位：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。。
Step 2｜只修改本主題的一個責任。
檔案：files/starter/style.css　定位：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。
要做：執行實驗替推薦 item 切換 align-featured-end class，讀取 computed align-self。
預期：runtime 的 align-self 由 auto 變 end；其他 items 仍依容器 align-items:stretch。
證據：runtime before=auto、after=end、property=align-self；其他 item computed align-self 仍為 auto
卡住先查：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：files/starter/style.css　定位：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 align-self 由 auto 變 end；其他 items 仍依容器 align-items:stretch。
證據：runtime before=auto、after=end、property=align-self；其他 item computed align-self 仍為 auto
卡住先查：先確認被測節點是 Grid item，再分開讀父層 align-items 與自身 align-self。

觀察示範

這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。

Grid item 對齊runtime fixture · read-only demo

本主題示範畫面：

一般卡

推薦卡

驗收證據

勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。

我能指出 files/starter/style.css 的目前缺口。
我依 Step 2 只修改本主題責任。
我重新載入並保存了這項證據：runtime before=auto、after=end、property=align-self；其他 item computed align-self 仍為 auto

提示 1｜方向

共同對齊看 container；單張例外看 item。

提示 2｜關鍵片段

只在推薦 item 加 align-self:end。

提示 3｜完整解答與原因

完整解答與原因：align-items 提供所有 items 預設值；align-self:end 只覆寫推薦 item，不影響其他卡片。

完成後進入下一階段，或回到入口選下一個 topic。

開始 Starter →回到主題清單