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

Question

Note: Using Vue.js and Vuetify.js for functionality and styling

I have card components dynamically generated with v-for, and I want to display them in 1/3/4 card(s) in a row depending on screen size (sm/md/lg). When I place them in Vuetify's grid system, with v-flex and v-layout elements, the cards are minimized, instead of moving to the second row.

Is there another way to go about this?

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">{{company.name}}</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

For a visual, this codepen shows the images width size decreases (but height size stays the same) - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

Answer 1

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