I am working on a parent component that uses a v-for to render instances of the product-box component based on the number of products. Currently, when there are 200 products, they simply stack on top of each other extending the page length like this:
[box]
[box2]
[box3]
[box4]
--page bottom--
Instead of having the page length keep increasing infinitely, I would like the layout to wrap based on the window size as follows:
[box1] [box3]
[box2] [box4]
--page bottom--
or further down if I make the screen even smaller:
[box1] [box2] [box3] [box4]
--page bottom--
Parent component code snippet
<div>
<product-box
v-for="(product,index) in this.$store.getters.getProducts"
:key="index"
:product = product
>
</product-box>
</div>
ProductBox.vue code snippet
<template>
<div class='products-box-component'>
<v-row>
<v-col cols="12">
<v-row
>
<v-col cols="2" :class="{'products-box': true}">
<div class="image-container">
</div>
<div class="info-container">
</div>
</v-col>
</v-row>
</v-col>
</v-row>
</div>
</template>