[Vuejs]-Using v-for to make a css grid

by

1👍

✅

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>
👤Boussadjra Brahim

0👍

Make the style display: inline-block instead of display: grid for .flipper class will resolve the issue.

Live Demo :

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>
👤Debug Diva

Leave a comment