如何将嵌套的 DIV 放置在具有可变行高的 CSS 网格中？

Question

我需要将 4 个 div 容器放在一个 2 x 2 矩阵中。列的宽度必须相等（因此是固定的），而行的高度必须适应单元格的内容（因此是可变的）。

只要标记结构看起来像这样，这很简单：

<div class="wrapper">
  <div class="cell a1">...</div>
  <div class="cell a2">...</div>
  <div class="cell b1">...</div>
  <div class="cell b2">...</div>
</div>

相应的 CSS 如下所示：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

不幸的是，我的标记（我无法轻易更改）包含嵌套标记结构中的单元格：

<div class="wrapper">
  <div class="container">
    <div class="cell a1">...</div>
    <div class="cell a2">...</div>
  </div>
  <div class="container">
    <div class="cell b1">...</div>
    <div class="cell b2">...</div>
  </div>
</div>

只要两行的高度可以相等，将 .container 声明为辅助网格就可以解决问题。但是由于必须根据单元格内容调整行高，所以这行不通。

有没有办法将所有四个 div.cell 放在 div.wrapper 定义的同一个网格中，尽管它们不是直接子元素？

Answer 1

您正在寻找的是Subgrid，目前（2021 年 12 月）仅在 Firefox Nightly 上测试的功能。

有关此 CSS 属性的信息 (from the Mozilla Web Docs page)：

当您将display: grid 添加到网格容器时，只有直接子项成为网格项，然后可以放置在您创建的网格上。

您可以通过使网格项成为网格容器来“嵌套”网格。然而，这些网格独立于父网格并且彼此独立，这意味着它们不会从父网格中获取轨道大小。这使得嵌套网格项很难与主网格对齐。

例如，如果您使用grid-template-columns: subgrid，并且嵌套网格跨越父网格的三个列轨道，则嵌套网格将具有与父网格大小相同的三个列轨道。

当该功能可用并被多个浏览器支持时，下面的示例将起作用（我猜）：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrapper {
  display: grid;
  height: 100vh;
  width: 100vw;
  background: grey;
  grid-auto-flow: rows;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}
.container {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.a1{
  background-color: blue;
  grid-row: 1;
  grid-column: 1;
}
.a2{
  background-color: yellow;
  grid-row: 1;
  grid-column: 2;
}
.b1 {
  background-color: red;
  grid-row: 2;
  grid-column: 1;
}
.b2 {
  background-color: green;
  grid-row: 2;
  grid-column: 2;
}

<div class="wrapper">
  <div class="container a">
    <div class="cell a1">A1</div>
    <div class="cell a2">A2</div>
  </div>
  <div class="container a">
    <div class="cell b1">B1</div>
    <div class="cell b2">B2</div>
  </div>
</div>

并且会呈现如下内容：