跳至內容
Astera Technology

多行名稱和內容,要共用同一組欄位

兩行內層資料共用 90px 標籤欄和 162px 內容欄,起點不隨名稱長短而改。

兩行內容格都從父層左邊後 98px 開始。

下載完整個案資料及參考答案 ↓

先看這個例子

父層闊 260px,欄位為 90px 和 1fr,間距 8px。每個內層行跨兩欄,再用 subgrid 共用欄位。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
標籤欄父層固定欄90px
內容欄260−90−8162px
內容起點90+8兩行同為 98px
下載可編輯 CSV ↓

瀏覽器怎樣處理

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 及跨欄設定,獨立欄位仍是獨立計算。

  • 查支援及兩個內容起點。
  • 文字放大時,固定欄內標籤仍要讀得完。

原始例子檔案

相關資源