Alignment of rows in nested CSS grid

Question

I have nested CSS grids with auto columns (fixed heights are no solution) and want the rows of the inner grids of the same row of the outer grid to align with each other - see the example below for illustration:

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

Putting display:contents on all the elements between the topmost display:grid and the bottom display:grid-item seems to do the trick.

Of course, the script that creates the list needs to generate adjusted grid-area values.

And the rest of the CSS also changes (e.g. the numbering).

But at least the Javascript doesn't need to be modified.

.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>