嵌套 CSS 网格中的行对齐

Question

我有嵌套的 CSS 网格与 auto 列（固定高度不是解决方案），并希望外部网格的同一行的内部网格的行相互对齐 - 请参阅下面的例子进行说明：

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 的其余部分也会发生变化（例如编号）。

但至少 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>