Vue 3 VuetifyJS Grid System Column Span

Question

I'm having a little trouble with the VuetifyJS grid system and would like to know if anyone can help me out. I have several cards in my grid that each have their own content and one card in particular needs to run across two rows as it displays more content. Is this possible using the VuetifyJS grid system without using display: grid CSS?

Current

Desired

Answer 1

Codepen

   <script type="text/x-template" id="app-template">
  <v-app class="pa-6">
    <v-container>
    <v-row > 
      <v-col>
         <v-row> 
          <v-col class="bg-black">1</v-col>
          <v-col>
            <v-row class="bg-red">2</v-row>
            <v-row class="bg-blue">3</v-row>
          </v-col>
          <v-col class="bg-grey">4</v-col>
        </v-row>
        <v-row> 
          <v-col class="bg-yellow">5</v-col>
          <v-col class="bg-green">6</v-col>
        </v-row>
     </v-col>
      <v-col class="bg-blue">7</v-col>
    </v-row>
  </v-container>
  </v-app>
</script>

<div id="app"></div>