अतिरिक्त रिक्ति के साथ vuetify ग्रिड में v-col की केंद्र n राशि

मैं कॉल्स के बाएँ और दाएँ रिक्ति के साथ n v-cols की मात्रा को केन्द्रित करने का प्रयास कर रहा हूँ, लेकिन v-cols को उपरोक्त v-cols के साथ संरेखित करने में असमर्थ हूं। ध्यान दें कि प्रतिक्रियात्मकता इरादे के अनुसार काम कर रही है, लेकिन अधिकतम स्क्रीन आकार पर मैं इसे दो v-cols तक सीमित करना चाहता हूं और इसे अन्य v-row क्षैतिज लंबाई में संरेखित करना चाहता हूं, जबकि सभी समान लंबाई v- कोल्स

वर्तमान में मुझे यह मिलता है:

से

<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>

मैं जो हासिल करने की कोशिश कर रहा हूं उसे नीचे देखा जा सकता है;

लाल v-cols के किनारों में रिक्ति जोड़ने के लिए क्या किया जा सकता है ताकि उन्हें अन्य उपरोक्त v-cols (उपरोक्त v-पंक्तियों में) के साथ संरेखित किया जा सके?

संपादित करें: इस कोड के साथ अब काम करता है:

<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>