title: How to display card components in loop with Vuetify grid system?
body: <p><strong>Note:</strong> Using Vue.js and Vuetify.js for functionality and styling</p>
  
  <p>I have card components dynamically generated with <code>v-for</code>, 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 <code>v-flex</code> and <code>v-layout</code> elements, the cards are minimized, instead of moving to the second row. </p>
  
  <p><strong>Is there another way to go about this?</strong></p>
  
  <pre><code>&lt;v-content&gt;
    &lt;v-card class="d-inline-flex" v-for="company of companies" :key="company.name"&gt;
      &lt;v-layout &gt;
        &lt;v-flex md6 lg6&gt;
          &lt;img class="company-logo" src="../assets/img/example-logo.png" alt="company logo"&gt;
        &lt;/v-flex&gt;
        &lt;v-flex md6 lg6&gt;
          &lt;v-card-title class="headline pl-0"&gt;{{company.name}}&lt;/v-card-title&gt;
          &lt;article class="text-md-left text-lg-left"&gt;
            &lt;v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"&gt;&lt;v-icon&gt;local_offer&lt;/v-icon&gt;&lt;/v-btn&gt;
            &lt;v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"&gt;&lt;v-icon&gt;notifications&lt;/v-icon&gt;&lt;/v-btn&gt;
            &lt;v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"&gt;&lt;v-icon&gt;rate_review&lt;/v-icon&gt;&lt;/v-btn&gt;
            &lt;v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"&gt;&lt;v-icon&gt;explore&lt;/v-icon&gt;&lt;/v-btn&gt;
            &lt;v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"&gt;&lt;v-icon&gt;room&lt;/v-icon&gt;&lt;/v-btn&gt;
          &lt;/article&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-card&gt;
  &lt;/v-content&gt;
  </code></pre>
  
  <p>For a visual, this codepen shows the images width size decreases (but height size stays the same) - <a href="https://codepen.io/johnjleider/pen/aLXBez?editors=1111" rel="noreferrer">https://codepen.io/johnjleider/pen/aLXBez?editors=1111</a></p>