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

问题描述 投票:0回答:1

我有一个有两列的网格布局。每个部分都是全宽(两列一行)。部分/行的数量是动态的。另外,我希望菜单 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;
}
css css-grid
1个回答
0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.