I am having trouble getting these images to display horizontally on the preview instead of vertically. I attempted using display grid in the CSS, but they still show up vertically. Can someone please help me figure out what I am missing? Essentially, when selecting two or more images, they are displaying vertically
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>