具有嵌套div结构的css网格[重复]

Question

我尝试构建一个 CSS Grid，其中一些条目嵌套在 div 结构中：

这样就可以了：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

但是如果我开始嵌套我的结构，我将无法访问我想要的列：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div>
    <!-- in reality there would be more divs and rows, I already have problems with one -->
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

有人可以告诉我如何使用嵌套结构实现网格吗？还是我有一个完全错误的方法？ （不幸的是，在代码中更改元素的顺序和结构会非常耗时）

Answer 1

嵌套网格是可能的，但请确保最内层 div 的父级本身确实具有display:grid。如果你不这样做，

由于这些项目不是网格的直接子项，它们不参与网格布局，因此显示在正常的文档流中。

（来自MDN: Basic concepts of grid layout。）

所以您需要做的就是将这些样式分配给 left 和 right div 的父级。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.cent + div {   /* this works for now, but you should choose a better selector for this one */
  display: grid;
  grid-column: 1 / 4;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div>
    <!-- in reality there would be more divs and rows, I already have problems with one -->
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>