CODEWITHSUNDEEP
cssvue.jsvuetify.js
asisleep
asisleep

Reputation: 33

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

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: enter image description here

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; enter image description here

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>

Upvotes: 1

Views: 3343

Answers (1)

hamid niakan
hamid niakan

Reputation: 2851

You can wrap your layout in something like this:

<v-row justify="center" align="center">
    <v-col cols="10">
      // Your layout goes here
    </v-col>
</v-row>

First row element makes the col inside it to be centered and since the cols prop of the col element is set to 10 (or other number other than 12 which fits your needs), it has an equal space from the sides.

So this way any layout you put inside this wrapper would be aligned.

Edit: I worked with this idea and prepared a pen for you to look at. here is the pen:

vuetify layout code pen

Upvotes: 1

Related Questions