<template>
  <div class="grid-container">
    <div
      v-for="item in items"
      :key="item.id"
      class="grid-item"
    >
      <!-- 内容 -->
    </div>
    <div class="scrollable-div">
      <!-- 滚动内容 -->
      <p v-for="content in scrollableContents" :key="content.id">
        {{ content.text }}
      </p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}], // 其他非滚动div的数据
      scrollableContents: [{id:1, text: '11111'},{id:2, text: '11111'},{id:3, text: '11111'},{id:4, text: '11111'},{id:5, text: '11111'},{id:6, text: '11111'},{id:7, text: '11111'}], // 滚动div的数据
    };
  },
};
</script>
 
<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列等宽 */
  gap: 10px; /* 格子间隔 */
}
 
.grid-item {
  /* 格子样式 */
}
 
.scrollable-div {
  grid-column: 1 / 4; /* 占据3列 */
  overflow: auto;
}
</style>