using v-for to make a css grid

September 18, 2022

I want these images to appear horizontal instead of vertical on the preview. I tried applying the display grid in the css, but it still appears vertical. Can someone tell me what is missing? Basically try selecting two or more images and they appear vertical

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>

>Solution :

The .flipper class should be in element that wrap the elements rendered by 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>