Vue

by skribe

HTML

<div id="app">
    <div v-for='row in makeRows' class="row">
        <div v-for='image in row' class="col">{{image}}</div>
    </div>
</div>

CSS

.row { display: table}

.col { float: left; padding: 10px;}

Vue

new Vue({
  el: "#app",
  data: {
    images: ['image-one','image-two','image-three','image-four','image-five','image-six'],
    rowSize: 2,
  },
  computed: {
  	makeRows(){
    	let row = [];
      let i,l, chunkSize = this.rowSize; 
     
      for (i=0,l=this.images.length; i<l; i+=chunkSize) {
           row.push(this.images.slice(i,i+chunkSize));
           
      }
      return row;
    }
  }
})