CSS Grid动态行数布局下菜单重叠所有行第一列的实现问题

问题场景 #

设置了一个两列的CSS Grid布局，要求每个section元素占满整行（跨两列），且section数量动态变化，布局行数随之调整。目标是让菜单DIV占据每一行的第一列，与section元素形成重叠效果。原本尝试让每个section从第一列到最后一列、菜单占据第一列并延伸至最后一行，但实际运行未达预期；手动设置精确grid-area坐标虽有效，但行数动态无法适配。

原始代码 #

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>
  ... (n个section元素)

  <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;
}

问题原因 #

原始代码中所有section都设置了grid-row: 1 / -1，导致所有section强制挤在同一行，Grid无法自动生成新行，自然无法实现多行section搭配菜单覆盖第一列的效果。

解决方案 #

核心思路是让每个section自动占据单独一行并跨两列，菜单固定在第一列并覆盖所有行高度，同时支持动态行数适配：

修改后的CSS #

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

.scrollSections__section {
  min-height: 100svh;
  border: 2px solid blue;
  grid-column: 1 / -1; /* 让section跨两列，自动占据单独一行 */
  padding: 50px;
  background: red;
}

.scrollSections__menu {
  border: 2px solid red;
  grid-column: 1; /* 固定在第一列 */
  grid-row: 1 / -1; /* 覆盖Grid所有行 */
  padding: 30px;
  z-index: 1; /* 确保菜单显示在section上方，按需调整 */
  /* 可选：滚动时菜单固定在视口 */
  position: sticky;
  top: 0;
  height: 100svh;
}

效果说明 #

1. 每个section通过grid-column: 1 / -1跨两列，Grid会根据section数量自动生成对应行数，完美适配动态数量需求。
2. 菜单通过grid-column: 1和grid-row: 1 / -1固定在第一列并覆盖所有行，实现与所有section第一列的重叠效果。
3. 可选添加position: sticky和height: 100svh，让菜单在页面滚动时始终固定在视口第一列，提升交互体验。

内容的提问来源于stack exchange，提问作者bezkitu