如何为Vue项目中CSS Grid的每一行添加独立滚动条？

要实现每行单独横向滚动，你不能再用单个Grid容器承载所有内容——因为Grid的布局上下文是全局的，整个容器的滚动会作用于所有行。正确的做法是把每一行（包括标题行）都做成独立的横向滚动容器，每个容器内部用Flex或Grid排列列元素，这样每行就能各自滚动了。

修改后的代码 #

JavaScript（无需改动）

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    contents: {
        '754637': {
            first: 'Bla Bla',
            second: 'test Test',
            third: 'some some'
        },
        '454554': {
            first: 'Bla Bla',
            second: 'test Test',
            third: 'some some'
        },
        '12121212': {
            first: 'Bla Bla',
            second: 'test Test',
            third: 'some some'
        }
      },
      rowIndex: {
        '754637': 2,
        '454554': 3,
        '12121212': 4
      }
  }
})

CSS

/* 每行的滚动容器 */
.row-container {
  display: flex;
  max-width: 100%;
  overflow-x: scroll;
  margin-bottom: 8px; /* 可选：给行之间加间距 */
}

/* 每个单元格的样式，保持原宽度 */
.cell {
  width: 1000px;
  flex-shrink: 0; /* 防止单元格被压缩 */
  padding: 4px 8px; /* 可选：加内边距优化排版 */
  border: 1px solid #eee; /* 可选：加边框区分单元格 */
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <!-- 标题行 -->
  <div class="row-container">
    <div class="cell">Title 1</div>
    <div class="cell">Title 2</div>
    <div class="cell">Title 3</div>
  </div>

  <!-- 数据行循环 -->
  <template v-for="(content, key) in contents" :key="key">
    <div class="row-container">
      <div class="cell">{{content.first}}</div>
      <div class="cell">{{content.second}}</div>
      <div class="cell">{{content.third}}</div>
    </div>
  </template>
</div>

关键改动说明 #

1. 结构拆分：把原来的单个Grid容器拆成多个.row-container，每个行对应一个容器，彻底隔离每行的滚动上下文。
2. Flex布局替代Grid：每行内部用Flex布局排列单元格，设置flex-shrink: 0保证单元格不会被压缩，保留原有的1000px宽度。
3. 独立滚动：每个.row-container都设置overflow-x: scroll，超出容器宽度时自动显示横向滚动条，实现每行单独滚动。

如果一定要保留Grid的布局方式（比如需要更复杂的单元格对齐），也可以把每个.row-container改成display: grid，设置grid-auto-flow: column，效果和Flex一致，CSS调整如下：

.row-container {
  display: grid;
  grid-auto-flow: column;
  max-width: 100%;
  overflow-x: scroll;
  margin-bottom: 8px;
}
.cell {
  width: 1000px;
  padding: 4px 8px;
  border: 1px solid #eee;
}

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