css 具有嵌套 div 结构的网格

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。如果你不这样做，

As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

（来自 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>

css 具有嵌套 div 结构的网格

css grid with nested div structure

html

css

css-grid