使用v-for与CSS Grid时图片预览无法横向排列的问题排查

核心错误原因 #

• 你把v-for指令放在了单个图片的容器上，导致每选中一张图片就生成一个独立的.flipper（Grid容器），每个容器里只有一张图片，自然会纵向堆叠。
• 额外冗余：给img标签设置display: grid完全没必要，Grid布局应该作用在父容器上，而非子元素。

修正后的完整代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="file" multiple="multiple" @change="onFileChange" /><br>
  <!-- 把v-for移到img标签上，让所有图片共享同一个Grid容器 -->
  <div id="preview" class="flipper">
    <img :src="img" :key="i" v-for="(img, i) in url" />
  </div>
</div>

CSS 部分

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

/* 统一的Grid容器样式，控制图片横向排列 */
.flipper {
  display: grid;
  grid-gap: 10px;
  /* auto-fit自动适配容器宽度，minmax设置图片最小宽度 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 10px;
}

#preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

JS 部分（无需修改，可选优化）

new Vue({
  el: '#app',
  data: () => ({ url: [], }),
  methods: {
    onFileChange(e) {
      // 可选：如果需要每次选择都清空之前的预览，添加此行
      // this.url = []
      [...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f)))
    },
  }
})

关键修改点 #

1. 将v-for从容器元素移到img标签，让所有图片归属于同一个Grid容器
2. 删除img标签上的Grid相关样式，Grid布局仅作用在父容器
3. 调整grid-template-columns的minmax参数，可根据需求修改图片最小宽度

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