[Vuejs]-Vuetify: Align Odd elements to left even elements to right in grid

by

0👍

Basically you can achieve this using the below code.

<v-col cols="6" v-for="(l,index) in list">
  {{l}}
</v-col>

0👍

<v-col cols="6" v-for="(l,index) in list">
  {{l}}
</v-col>

Here a demonstration of Mr. Hameeds reply working in a codepen

However, as you can see this approach puts both the odd and even cols in the same row, if you do wish to have them in seperate rows, all you have to do is in your case, put the margin-left style property of the odd columns to auto. Since you are in a flex container, margin-auto will fill up as much space as it can, pushing the component all the way to the left.

Your modified code will look like this:

<v-row>
     <v-col cols="12" v-for="(l,index) in list">
        <v-col v-if="index%2==0" cols="6">{{l}}</v-col>
        <v-col v-else cols="6" class="ml-auto">{{l}}</v-col>
     </v-col>
</v-row>

Here the codepen

Leave a comment