嵌套 CSS 网格中的行对齐 [英] Alignment of rows in nested CSS grid

问题描述

我嵌套了带有 auto 列的 CSS 网格(固定高度无法解决)，并且希望外部网格同一行的内部网格的行对齐彼此 - 请参阅下面的示例以进行说明:

ol ol{list-style:lower-alpha;}ol{显示:网格；网格模板列:自动自动；}li{显示:网格项目；}li.x1y1{网格区域:1/1;}li.x1y2{网格区域:2/1;}li.x2y1{网格区域:1/2;}li.x2y2{grid-area:2/2;}

1.单网格
<p>网格布局的基本情况:</p><ol>
 左上角<p>额外的文字.</p>
<li class="x2y1">右上角</li><li class="x1y2">左下角</li><li class="x2y2">右下</li></ol><p>注意如何<q>4.右下与<q>3对齐.左下角.</p><p>现在，让我们看看嵌套网格时会发生什么.</p><h2>2.嵌套网格<ol>
<ol>
 左上角<p>额外的文字.</p>
<li class="x2y1">右上角</li><li class="x1y2">左下角</li><li class="x2y2">右下</li></ol>
<ol><li class="x1y1">左上</li><li class="x2y1">右上角</li><li class="x1y2">左下角</li><li class="x2y2">右下</li></ol>
<ol><li class="x1y1">左上</li><li class="x2y1">右上角</li><li class="x1y2">左下角</li><li class="x2y2">右下</li></ol>
<ol><li class="x1y1">左上</li><li class="x2y1">右上角</li><li class="x1y2">左下角</li><li class="x2y2">右下</li></ol>
</ol><p>和以前一样，<q>1.d 右下</q>与<q>1.c左下</q>对齐.</p><p>然而，<q>2.c左下</q>和<q>3.d右下</q>与上述不一致 - 因为它们不在同一个网格中.</p><h2>3.HTML解决方案"<p>下面的代码改变了 HTML 以显示它应该是什么样子.</p><ol style="grid-template-columns:auto auto auto auto"><li style="grid-area:1/1">左上角 (1.a)<p>额外的文字.</p><li style="grid-area:1/2">右上角(1.b)</li><li style="grid-area:2/1">左下角 (1.c)</li><li style="grid-area:2/2">右下角(1.d)</li><li style="grid-area:1/3">左上角(2.a)</li><li style="grid-area:1/4">右上角(2.b)</li><li style="grid-area:2/3">左下角 (2.c)</li><li style="grid-area:2/4">右下角(2.d)</li><li style="grid-area:3/1">左上角(3.a)</li><li style="grid-area:3/2">右上角(3.b)</li><li style="grid-area:4/1">左下角 (3.c)</li><li style="grid-area:4/2">右下角(3.d)</li><li style="grid-area:3/3">左上角(4.a)</li><li style="grid-area:3/4">右上角(4.b)</li><li style="grid-area:4/3">左下角 (4.c)</li><li style="grid-area:4/4">右下角 (4.d)</li></ol><p>但是，更改后的 HTML 不仅破坏了编号，而且还破坏了 Javascript 依赖于 HTML 来确定属于何处的内容(仅出于示例的目的，它是 2x2 元素 - 实际上它可以在任一维度上或多或少).</p><p>因此，需要在第 2 节中的 HTML 上使用 CSS 来实现下面的外观，而不是像第 3 节那样通过更改 HTML 来实现.</p><p>那么，我该怎么做呢?

解决方案

将 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{显示:内容；}ol ol li{display:grid-item;}

<ol><li style="grid-area:1/1">左上角<p>额外的文字.</p>
<li style="grid-area:1/2">右上角</li><li style="grid-area:2/1">左下角</li><li style="grid-area:2/2">右下</li></ol>
<ol><li style="grid-area:1/3">左上</li><li style="grid-area:1/4">右上角</li><li style="grid-area:2/3">左下角</li><li style="grid-area:2/4">右下</li></ol>
<ol><li style="grid-area:3/1">左上</li><li style="grid-area:3/2">右上角</li><li style="grid-area:4/1">左下角</li><li style="grid-area:4/2">右下</li></ol>
<ol><li style="grid-area:3/3">左上</li><li style="grid-area:3/4">右上角</li><li style="grid-area:4/3">左下角</li><li style="grid-area:4/4">右下</li></ol>

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>

解决方案

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>

这篇关于嵌套 CSS 网格中的行对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！