CSS 网格区域与所有行的第一列重叠

Question

我有一个有两列的网格布局。每个部分都是全宽（两列一行）。部分/行的数量是动态的。另外，我希望菜单 DIV 占据每行的第一列（与各部分重叠）。理论上，代码应该如下所示。每个部分从第一列开始，到最后一列结束。另一方面，菜单占据第一列并延伸到最后一行。实际上，这是行不通的。如果我使用网格区域为每个项目设置确切的坐标，那么它就会开始工作，但我无法做到这一点，因为我不知道部分/行的数量。有什么想法吗？

HTML：

<div class="scrollSections__grid">     
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  <div class="scrollSections__section"></div>
  ... (nth-elements)

  <div class="scrollSections__menu"> </div>
</div>

CSS

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

.scrollSections__section {
  min-height: 100svh;
  border: 2px solid blue;
  grid-row: 1 / -1;
  padding: 50px;
  background: red;
}

.scrollSections__menu {
  border: 2px solid red;
  grid-area: 1 / 1 / -1 / 2;
  padding: 30px;
}

Answer 1

如果您正在寻找一个网格，其中菜单占据第一列，所有其他列占据第二列，您可以继续使用网格方法，只需添加一个封装弹性容器即可。

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

.columns-container {
  display: flex;
}

.column {
  flex: 1;
}

<div class="grid">
  <div class="menu">Menu </div>
  <div class="columns-container">
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
  </div>
</div>