具有嵌套 div 结构的 css 网格

Question

我尝试构建一个 CSS 网格，其中一些条目嵌套在 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：网格布局的基本概念。）

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

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