using v-for to make a css grid

Vzupo 0
Viewed 28

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>

vue.js css
2 Answers

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 Brahim0

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>

Rohìt Jíndal0
Related