LESSON-09 · TOPIC 01
能分辨 grid-template 宣告的 explicit tracks 與放不下新 item 時由 Grid placement 建立的 implicit tracks。
能分辨 grid-template 宣告的 explicit tracks 與放不下新 item 時由 Grid placement 建立的 implicit tracks。
資料筆數增加時，implicit rows 會真實參與版面；若只看模板欄數，容易誤判新增卡片的高度與位置。
要修改的檔案：files/starter/style.css
定位：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。｜依 starter-1 定位，只修改「explicit 與 implicit tracks」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
服務 Grid 原本只畫一列兩欄，API 加入第三筆服務後第二列高度與預期不同。
起始狀態：grid-template-columns 有兩欄、grid-template-rows 有一列，DOM 放入三個 items，grid-auto-rows:auto。
runtime 的 grid-auto-rows 由 auto 變 56px；DOM 有 3 items，因此第三項位於模板外生成的 implicit row。
驗收證據：runtime before=auto、after=56px、property=grid-auto-rows；DOM item count=3，模板容量第一列只有2項
清單筆數不固定、Grid auto-placement 會新增列，或需要控制自動列高度時。
常見混淆：implicit track 不是新增 DOM 元素；它是 layout algorithm 為現有 item 建立的軌道。
這段程式是理解起點，不是要你直接跳過 Starter。
explicit 是你先畫好的格線；implicit 是內容超出圖紙後，瀏覽器自動補出的新格子。
正式說法：Explicit grid is defined by grid-template-*；auto-placement creates implicit tracks when positioned items fall outside the explicit grid, sized by grid-auto-rows/columns。
.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:3rem;grid-auto-rows:3.5rem}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。。
檔案：files/starter/style.css 定位：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。
要做：執行實驗替三 item grid 切換 size-implicit-row class，讀取 computed grid-auto-rows。
預期：runtime 的 grid-auto-rows 由 auto 變 56px；DOM 有 3 items，因此第三項位於模板外生成的 implicit row。
證據：runtime before=auto、after=56px、property=grid-auto-rows；DOM item count=3，模板容量第一列只有2項
卡住先查：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。
檔案：files/starter/style.css 定位：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 grid-auto-rows 由 auto 變 56px；DOM 有 3 items，因此第三項位於模板外生成的 implicit row。
證據：runtime before=auto、after=56px、property=grid-auto-rows；DOM item count=3，模板容量第一列只有2項
卡住先查：先數直接 Grid items，再讀 grid-template-rows 與 grid-auto-rows。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
比較模板能容納的 item 數與實際直接子層數量。
第三個 item 需要 implicit row；用 grid-auto-rows 控制它。
完整解答與原因：兩欄一列的 explicit grid 只能放前兩項；第三項由 auto-placement 建立 implicit row，runtime 將其 sizing 由 auto 改成 56px。