先看這個例子
父層闊 260px,欄位為 90px 和 1fr,間距 8px。每個內層行跨兩欄,再用 subgrid 共用欄位。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 標籤欄 | 父層固定欄 | 90px |
| 內容欄 | 260−90−8 | 162px |
| 內容起點 | 90+8 | 兩行同為 98px |
瀏覽器怎樣處理
Subgrid 按該行跨欄範圍參與父層欄位配置。若各行另用自動尺寸 grid,名稱長短可能得出不同標籤闊度,內容起點亦會不同。須先查真正引擎支援,再信所需對齊。
各行自動計欄,起點會各自偏移
反例每行不用 subgrid,改成自己的 auto/1fr grid。
<style>body{margin:8px}</style>
<style>.facts{display:grid;width:260px;grid-template-columns:90px 1fr;gap:8px}.row{display:grid;grid-column:1/-1;grid-template-columns:auto 1fr;gap:8px}.row p{margin:0;overflow-wrap:anywhere}</style><section class="facts"><section class="row"><p>原始檔</p><p>index.html</p></section><section class="row"><p>樣式表檔案</p><p>lesson.css</p></section></section>原始檔與樣式表檔案各自決定 auto 標籤欄,兩行內容起點因此不同。
試着修正
只有共同父層 grid,就會強制內層各行用相同欄位嗎?
查看參考答案
不會。內層須有合適 subgrid 及跨欄設定,獨立欄位仍是獨立計算。
- 查支援及兩個內容起點。
- 文字放大時,固定欄內標籤仍要讀得完。