如何为按行填充的CSS Grid第一列添加统一滚动条

核心思路是把第一列的所有内容整合到单个可滚动容器中，让这个容器占据Grid第一列的全部行空间，这样内容超出时整个列会出现统一滚动条，而非单个单元格独立滚动。

示例对比与修改方案 #

原问题典型结构（单单元格独立滚动）

<div class="grid-container">
  <div class="grid-item col1">非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容</div>
  <div class="grid-item col2">内容2</div>
  <div class="grid-item col1">另一行超长内容另一行超长内容另一行超长内容另一行超长内容另一行超长内容</div>
  <div class="grid-item col2">内容4</div>
  <div class="grid-item col1">第三行超长内容第三行超长内容第三行超长内容第三行超长内容第三行超长内容</div>
  <div class="grid-item col2">内容6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  height: 300px;
}
.grid-item.col1 {
  overflow-y: auto;
  border: 1px solid #ccc;
}
</style>

修改后结构（第一列统一滚动）

<div class="grid-container">
  <!-- 第一列滚动容器：占据所有行 -->
  <div class="col-1-scroll">
    <div class="col-content">非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容非常长的内容</div>
    <div class="col-content">另一行超长内容另一行超长内容另一行超长内容另一行超长内容另一行超长内容</div>
    <div class="col-content">第三行超长内容第三行超长内容第三行超长内容第三行超长内容第三行超长内容</div>
  </div>
  <!-- 第二列单元格保持原有结构 -->
  <div class="grid-item col2">内容2</div>
  <div class="grid-item col2">内容4</div>
  <div class="grid-item col2">内容6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  height: 300px;
}
/* 关键：让滚动容器占据第一列全部行空间 */
.col-1-scroll {
  grid-row: 1 / -1;
  overflow-y: auto;
  border: 1px solid #ccc;
}
/* 保持原单元格的样式与间距 */
.col-content {
  padding: 8px;
  margin-bottom: 10px;
}
.col-content:last-child {
  margin-bottom: 0;
}
.grid-item.col2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

关键说明 #

• grid-row: 1 / -1：让滚动容器从Grid第一行延伸到最后一行，高度与Grid容器一致，内容超出时触发整体滚动。
• 第一列内容整合后，视觉上仍可通过.col-content还原原单元格的间距、内边距等样式，不破坏原有布局效果。
• 无需修改Grid按行填充的核心逻辑，完全符合需求限制。

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