How to display card components in loop with Vuetify grid system?

The <v-flex> grid maxes out at 12. So if you set xs12 (extra small breakpoint) on the <v-flex xs12> it will take up all of the grid width until it hits the next breakpoint (If you don't set another breakpoint the lowest one will be applied to all screen widths). So then set <v-flex xs12 md6>, now when you hit the medium breakpoint each card will take up 6 grid spaces, which will allow you to have 2 cards side by side. Setting lg3, will allow you to fit 4 cards in the same space.

You can see it working in this modification to your example https://codepen.io/twandy/pen/JrxamB?editors=1001

The accepted answer did not work for me with v2 of Vuetify.

Now we can use <v-col> and you would do something like below.

<v-row>
    <v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
        <my-component :my-data="something" />
    </v-col>
</v-row>

Where cols="12" is the same as xs="12" and the column would take up the full 12 spaces.

The sizing scales up starting with the smallest screens. Then on small screens each column would take up 4 spaces resulting in 3 columns and then for medium and larger screens use 3 spaces resulting in 4 columns.

|__|__|__|__|__|__|__|__|__|__|__|__|  12 spaces in the grid
|-----------------------------------|  <-cols=12 (1 column)
|--------|--------|--------|--------|  <-sm=3 (4 columns)
|-----------|-----------|-----------|  <-md=4 and larger (3 columns)