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

Original

asisleep 2020-11-29 13:50:24

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

asisleep 2020-11-29 13:58:35

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.

hamid niakan 2020-11-29 14:00:06

@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

asisleep 2020-11-29 14:11:19

But I solved it by adding the v-cols in a row>col>row structure! :) Thanks

Center n amount of v-col in vuetify grid with added spacing

热门github