LESSON-09 · TOPIC 04
能用 minmax(0,1fr) 解除 1fr 的內容型最小限制，並對不可斷長字串提供斷點。
能用 minmax(0,1fr) 解除 1fr 的內容型最小限制，並對不可斷長字串提供斷點。
Grid 的 1fr 軌道仍可能受 min-content 撐寬；只隱藏 overflow 會裁掉內容，無法修正 track sizing 根因。
要修改的檔案：files/starter/style.css
定位：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。｜依 starter-4 定位，只修改「min-content 與長字串溢位」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
兩欄服務 Grid 在手機出現水平捲軸，問題卡片含一串不可斷的預約代碼。
起始狀態：--tracks 為 1fr 1fr；長 token 已可辨識，尚未使用安全最小軌道。
runtime 的 --tracks 由 `1fr 1fr` 變 `minmax(0,1fr) minmax(0,1fr)`；人工重測 Grid 不再橫向溢位。
驗收證據：runtime before=`1fr 1fr`、after=`minmax(0,1fr) minmax(0,1fr)`、property=--tracks；人工證據為 scrollWidth<=clientWidth
等寬 Grid 卡片含 URL、代碼或長單字，390px 下軌道被撐出 viewport 時。
常見混淆：min-content 是內容能在合法斷點下縮到的最小內在尺寸，不等於 CSS min-width 的固定數值。
這段程式是理解起點，不是要你直接跳過 Starter。
1fr 會分空間，但軌道仍可能說『至少要放得下這串不能斷的文字』；把最小值設 0 才允許它縮。
正式說法：A flexible track has an automatic minimum that can honor min-content contribution；minmax(0,1fr) sets an explicit zero minimum, while overflow-wrap supplies break opportunities for long inline content。
.grid{--tracks:repeat(2,minmax(0,1fr));grid-template-columns:var(--tracks)}.card{min-width:0}.url{overflow-wrap:anywhere}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。。
檔案：files/starter/style.css 定位：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。
要做：執行實驗切換 safe-grid-tracks class，讀取實際控制 grid-template-columns 的 --tracks custom property。
預期：runtime 的 --tracks 由 `1fr 1fr` 變 `minmax(0,1fr) minmax(0,1fr)`；人工重測 Grid 不再橫向溢位。
證據：runtime before=`1fr 1fr`、after=`minmax(0,1fr) minmax(0,1fr)`、property=--tracks；人工證據為 scrollWidth<=clientWidth
卡住先查：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。
檔案：files/starter/style.css 定位：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 --tracks 由 `1fr 1fr` 變 `minmax(0,1fr) minmax(0,1fr)`；人工重測 Grid 不再橫向溢位。
證據：runtime before=`1fr 1fr`、after=`minmax(0,1fr) minmax(0,1fr)`、property=--tracks；人工證據為 scrollWidth<=clientWidth
卡住先查：先讀 Grid 與長 token 的 scrollWidth/clientWidth，再檢查 grid-template-columns。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
不要先隱藏捲軸；確認哪個 track 被 min-content 撐開。
把每個 1fr 改成 minmax(0,1fr)，item 再設 min-width:0。
完整解答與原因：0 明確解除內容型最小軌道下限，1fr 繼續分配剩餘空間；anywhere 讓長 token 保留可讀又能換行。