Alignment Of Rows In Nested Css Grid

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

Solution 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;}
olol{display:contents;}
ololli{display:grid-item;}

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