using v-for to make a css grid-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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" >
    <img :src="img" />
  </div>
</div>