How to align items properly in vue row in vuetify?

Question

i have list of products and i wanna show them on page

<v-tab-item
   <v-row>
      <Product v-for="n in 10" :key="n"/>
    </v-row>
<v-tab-item

Here is output List of products

How to make only (let's say max 6 products in a row) and same margin between each one?

Answer 1

Check this codesandbox I made: https://codesandbox.io/s/stack-70701639-f1uc3?file=/src/components/GridExample.vue

You mean something like this?

If, so. Instead using the v-for in your Product component, wrap it in a v-col tag and use the for loop there instead. This way you can play with vuetify's grid system and make your design responsive for multiple view ports as I did in my example.

<v-row>
   <v-col 
      v-bind:key="n" 
      v-for="n in 10" 
      cols="12" 
      sm="6" 
      md="4" 
      lg="2"
   >   
      <CardItem/>
   </v-col>
</v-row>