Alignment 嵌套 CSS 網格中的行

Question

我已經嵌套了帶有auto列的 CSS 網格（固定高度不是解決方案），並且希望外部網格的同一行的內部網格的行相互對齊 - 請參見下面的示例進行說明：

 ol ol{list-style:lower-alpha;} ol{display:grid;grid-template-columns:auto auto;} li{display:grid-item;} li.x1y1{grid-area:1/1;} li.x1y2{grid-area:2/1;} li.x2y1{grid-area:1/2;} li.x2y2{grid-area:2/2;}

 <h2>1. Single Grid</h2> <p> The basic case of a grid layout: </p> <ol> <li class="x1y1">Top Left <p> Extra text. </p> </li> <li class="x2y1">Top Right</li> <li class="x1y2">Bottom Left</li> <li class="x2y2">Bottom Right</li> </ol> <p> Note how <q>4. Bottom Right</q> is aligned with <q>3. Bottom Left</q>. </p> <p> Now, let's see what happens when nesting grids. </p> <h2>2. Nested Grid</h2> <ol> <li class="x1y1"> <ol> <li class="x1y1">Top Left <p> Extra text. </p> </li> <li class="x2y1">Top Right</li> <li class="x1y2">Bottom Left</li> <li class="x2y2">Bottom Right</li> </ol> </li> <li class="x2y1"> <ol> <li class="x1y1">Top Left</li> <li class="x2y1">Top Right</li> <li class="x1y2">Bottom Left</li> <li class="x2y2">Bottom Right</li> </ol> </li> <li class="x1y2"> <ol> <li class="x1y1">Top Left</li> <li class="x2y1">Top Right</li> <li class="x1y2">Bottom Left</li> <li class="x2y2">Bottom Right</li> </ol> </li> <li class="x2y2"> <ol> <li class="x1y1">Top Left</li> <li class="x2y1">Top Right</li> <li class="x1y2">Bottom Left</li> <li class="x2y2">Bottom Right</li> </ol> </li> </ol> <p> As before, <q>1.d Bottom Right</q> is aligned with <q>1.c Bottom Left</q>. </p> <p> However, <q>2.c Bottom Left</q> and <q>3.d Bottom Right</q> aren't aligned with the aforementioned - because they're not in the same grid. </p> <h2>3. HTML "Solution"</h2> <p> The code below alters the HTML to show what it's supposed to look like. </p> <ol style="grid-template-columns:auto auto auto auto"> <li style="grid-area:1/1">Top Left (1.a) <p> Extra text. </p> </li> <li style="grid-area:1/2">Top Right (1.b)</li> <li style="grid-area:2/1">Bottom Left (1.c)</li> <li style="grid-area:2/2">Bottom Right (1.d)</li> <li style="grid-area:1/3">Top Left (2.a)</li> <li style="grid-area:1/4">Top Right (2.b)</li> <li style="grid-area:2/3">Bottom Left (2.c)</li> <li style="grid-area:2/4">Bottom Right (2.d)</li> <li style="grid-area:3/1">Top Left (3.a)</li> <li style="grid-area:3/2">Top Right (3.b)</li> <li style="grid-area:4/1">Bottom Left (3.c)</li> <li style="grid-area:4/2">Bottom Right (3.d)</li> <li style="grid-area:3/3">Top Left (4.a)</li> <li style="grid-area:3/4">Top Right (4.b)</li> <li style="grid-area:4/3">Bottom Left (4.c)</li> <li style="grid-area:4/4">Bottom Right (4.d)</li> </ol> <p> However, the altered HTML not only breaks the numbering but also the Javascript relying on the HTML to figure out what belongs where (it's 2x2 elements only for the sake of the example - in practice it can be more or less in either dimension). </p> <p> Therefore the appearance below needs to be achieved using CSS on the HTML from section 2, not by altering the HTML as in section 3. </p> <p> So, how do I do that? </p>

Answer 1

將display:contents放在最頂部display:grid和底部display:grid-item之間的所有元素上似乎可以解決問題。

當然，創建列表的腳本需要生成調整后grid-area值。

並且 CSS 的 rest 也發生了變化（例如編號）。

但至少 Javascript 不需要修改。

 .container{display:grid;grid-template-columns:auto auto auto auto;}.container>li{display:contents;} ol ol{display:contents;} ol ol li{display:grid-item;}

 <ol class="container"> <li class="x1y1"> <ol> <li style="grid-area:1/1">Top Left <p> Extra text. </p> </li> <li style="grid-area:1/2">Top Right</li> <li style="grid-area:2/1">Bottom Left</li> <li style="grid-area:2/2">Bottom Right</li> </ol> </li> <li class="x2y1"> <ol> <li style="grid-area:1/3">Top Left</li> <li style="grid-area:1/4">Top Right</li> <li style="grid-area:2/3">Bottom Left</li> <li style="grid-area:2/4">Bottom Right</li> </ol> </li> <li class="x1y2"> <ol> <li style="grid-area:3/1">Top Left</li> <li style="grid-area:3/2">Top Right</li> <li style="grid-area:4/1">Bottom Left</li> <li style="grid-area:4/2">Bottom Right</li> </ol> </li> <li class="x2y2"> <ol> <li style="grid-area:3/3">Top Left</li> <li style="grid-area:3/4">Top Right</li> <li style="grid-area:4/3">Bottom Left</li> <li style="grid-area:4/4">Bottom Right</li> </ol> </li> </ol>