How to support custom tiles in large screen in vuetify? - vue.js

Question

I have a dashboard that contains tiles in 3 rows, each row contains 5 tiles. Like the below picture
I am using the below code for tiles:
<v-layout row wrap>
<v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
<v-card flat tile class="d-flex">
<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-flex>
<v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
<v-card flat tile class="d-flex">
<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-flex>
... so on
</v-layout>
Below is my CSS code to customize the tiles:
#media (min-width: 1264px) and (max-width: 1903px) {
.flex.lg5-custom {
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
.flex.lg10-custom {
width: 40%;
max-width: 40%;
flex-basis: 40%;
}
}
Even small screen sometimes 3rd row last tiles don't support.
.flex.lg10-custom CSS used for 3rd rows last tile.
I wanted to support this landing page for all screen (especially large screen). Any idea?

Answer 1

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.