我有一个有两列的网格布局。每个部分都是全宽(两列一行)。部分/行的数量是动态的。另外,我希望菜单 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;
}
如果您正在寻找一个网格,其中菜单占据第一列,所有其他列占据第二列,您可以继续使用网格方法,只需添加一个封装弹性容器即可。
.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>