Struggling to center a specific number of v-cols with equal spacing on the left and right sides, while also aligning them horizontally with other v-cols. The responsiveness is working fine, but I want to limit it to two v-cols at maximum screen size, aligned with the lengths of the other v-rows.
My current layout looks like this: https://i.sstatic.net/W9Brd.png
Starting from:
<v-container>
<v-row dense justify="center">
<v-col cols="12" md="6" lg="4" xl="3">
// ...
</v-col>
</v-row>
<v-row dense justify="center">
<v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
// ...
</v-col>
<v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
// ...
</v-col>
</v-row>
<v-row dense justify="center">
<v-col v-for="(item, n) in list" :key="n" cols="12" sm="6" md="6" lg="4" xl="4">
// ...
</v-col>
</v-row>
The desired outcome is shown below: https://i.sstatic.net/7n2jJ.png
How can I add spacing to the red v-cols to keep them aligned with the v-cols above (in the previous v-rows)?
Edit: Resolved by updating the code as follows:
<v-container>
<!-- .. other rows -->
<v-row justify="center">
<v-col cols="24" sm="12" xs="12" md="12" lg="8" xl="6">
<v-row dense justify="center" class="green">
<v-col v-for="(item, n) in list" :key="n" sm="12" xs="12" md="12" lg="8" xl="6" class="br text-center red">
// content
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>