[Vuejs]-How to support custom tiles in large screen in vuetify?

by

0👍

So, I have resolved it by using v-row and v-col instead of v-flex. However, all the tiles got small compare to the previous one because the entire row size is 12 and I divided by 5 so, that I can only utilize only 10, not 12. I had to leave 1 from left and 1 from the right to make it center. Below is my code:

<v-container fluid>
  <v-row justify="center">
    <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  ... so on
 </v-row>
.... last row last col
<v-row justify="center">
... first 3 will be the same as before

  <v-col cols="4" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary d-flex" height="50%">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
 </v-row>
</v-container>

If anyone wants the full solution, please comment below.

Leave a comment