Warm tip: This article is reproduced from serverfault.com, please click
Center n amount of v-col in vuetify grid with added spacing
发布于 2020-11-27 21:23:21
I am trying to center n amount of v-cols with spacing left and right of the cols but unable to center the v-cols aligned with the above v-cols. Note that the responsiveness is working as intended, but at max screen size I want to limit it to two v-cols and align it to the other v-row horizontal lengths, all while keeping the same lengths of the v-cols.
Currently I get this:
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>
What I am trying to accomplish can be seen below;
What can be done to add spacing to the sides of the red v-cols to keep them aligned with the other above v-cols (in above v-rows)?
Edit: Works now with this code:
<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>
Questioner
asisleep
Viewed
0
Hey, thanks for the answer - I might have forgotten to mention, but I want to limit the number of dynamic v-cols to 2 per row. And the dynamic v-cols are the same width as the above v-cols (view image above). That's where I am unable to center and align it with the above v-cols
Like, when there are only 2 v-cols they are perfectly aligned. But, when there are 3 or more, it will display 3 v-cols in a single row and it wont be aligned to the above v-row.
@asisleep updated the code pen example (if I'm not mistaken about what you mean), but basically you can limit the v-cols to 2 per row by setting its col prop to 6
But I solved it by adding the v-cols in a row>col>row structure! :) Thanks