How can I set the images like the link image below in vuetify?

Question

I want to quantify my v-img like the one you see in the image below.

Is there a way to make something like the image you see with vuetify's v-img.

 <div class="row">
      <v-img style="margin:2px" max-height="301" max-width="380"
      :key="index" v-for="(image, index) in post.userPostImg" 

      :src="$store.state.baseURL + '/news/' + image"> </v-img>
    </div>

Answer 1

Create two rows with no-gutters prop, the first one contains one image and the other one contains three columns that conain the 3 images :

  <v-row no-gutters>
      <v-col cols="12">
        <v-img :src="`https://picsum.photos/500/300?image=51`" aspect-ratio="1">

        </v-img>
      </v-col>
    </v-row>
    <v-row no-gutters>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=52`" aspect-ratio="1">

        </v-img>
      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=53`" aspect-ratio="1">

        </v-img>

      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=54`" aspect-ratio="1">

        </v-img>

      </v-col>

    </v-row>

LIVE DEMO