使用v-for制作css网格

Question

我希望这些图像在预览中显示为水平而不是垂直。我尝试在css中应用显示网格，但它仍然显示为垂直。有人能告诉我缺了什么吗？基本上尝试选择两个或多个图像，它们会出现垂直

new Vue({
el: '#app',
data: () => ({ url: [], }),
methods: {
onFileChange(e) {
[...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f)))
},
}
})

body {
background-color: #e2e2e2;
}
#app {
padding: 20px;
}
#preview {

}
.flipper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

#preview img {
max-width: 100%;
max-height: 50px;
padding-right:5px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.myGallery {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

<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>
<div id="preview" v-for="(img, i) in url" :key="i" class=flipper>
<img :src="img" />
</div>
</div>

Answer 1

.flipper类应该在包装v-for:呈现的元素的元素中

new Vue({
el: '#app',
data: () => ({
url: [],
}),
methods: {
onFileChange(e) {
[...e.target.files].forEach(f => this.url.push(URL.createObjectURL(f)))
},
}
})

body {
background-color: #e2e2e2;
}
#app {
padding: 20px;
}
#preview {}
.flipper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
#preview img {
max-width: 100%;
max-height: 50px;
padding-right: 5px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.myGallery {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

<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>
<div class="flipper">
<div id="preview" v-for="(img, i) in url" :key="i">
<img :src="img" />
</div>
</div>
</div>

Answer 2

为.flipper类设置样式display: inline-block而不是display: grid将解决此问题。

实时演示：

new Vue({
el: '#app',
data: {
url: ['a.jpg', 'b.jpg', 'c.jpg']
}
})

body {
background-color: #e2e2e2;
}
#app {
padding: 20px;
}
.flipper {
display: inline-block;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

#preview img {
max-width: 100%;
max-height: 50px;
padding-right:5px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.myGallery {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<div id="preview" v-for="(img, i) in url" :key="i" class="flipper">
<img :src="img" />
</div>
</div>