title: How to display store items in v-for loop with Vuetify grid?
body: <p>I am attempting to display card items in a v-for loop with Vuetify grid system. The loop is set up to iterate through dynamically inputted Firestore items returned to the template from a Vuex store file ("item in this.$store.getters.getItems"), which are then rendered as Vuetify cards. I was successful in setting up the loop to render the items in small cards inside a container. However, I want these cards to render in a grid. In other words, I want to create a breaking point so that after 3 cards, for example, the 4th, 5th, and 6th card drop down to a new row. How can I achieve this? I understand how to do this in a more simpler setup without a Vuex getter method in a v-for loop. But how does this work when Vuex methods start entering the picture? My code is below:</p>
  
  <p>Home.vue</p>
  
  <pre><code>&lt;template&gt;
   &lt;div id="home"&gt;
     &lt;v-container&gt;
       &lt;v-text-field v-model="myTodo" placeholder="add input"&gt;&lt;/v-text-field&gt;
       &lt;v-btn @click="addToDo"&gt;Add&lt;/v-btn&gt;
     &lt;/v-container&gt;
  
    &lt;v-container&gt;
      &lt;v-flex md7&gt;
        &lt;v-card class="elevation-0 transparent card-container grey"&gt;
          &lt;v-card-title primary-title class="layout justify-center"&gt;
            &lt;div class="headline text-xs-center"&gt;CARD CONTAINER&lt;/div&gt;
          &lt;/v-card-title&gt;
          &lt;v-flex d-flex&gt;
            &lt;v-card class="card-container" v-for="item in this.$store.getters.getItems" :key="item.id"&gt;
              {{ item.title }}&lt;v-btn @click="deleteItem(item.id)"&gt;Delete&lt;/v-btn&gt;
            &lt;/v-card&gt;
          &lt;/v-flex&gt;
        &lt;/v-card&gt;
      &lt;/v-flex&gt;
    &lt;/v-container&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { db } from '@/main'
  
  export default {
    name: 'home',
    beforeCreate: function () {
      this.$store.dispatch('setItems')
    },
    data: function () {
      return {
        myTodo: '',
        errors: ''
      }
    },
    methods: {
      addToDo: function () {
        this.errors = ''
        if (this.myTodo !== '') {
          db.collection('items').add({
            title: this.myTodo,
            created_at: Date.now()
          }).then((response) =&gt; {
            if (response) {
              this.myTodo = ''
            }
          }).catch((error) =&gt; {
            this.errors = error
          })
        } else {
          this.errors = 'Please enter some text'
        }
      },
      deleteItem: function (id) {
        if (id) {
          db.collection("items").doc(id).delete().then(function() {
            console.log('Document successfully deleted')
          }).catch(function(error) {
            this.error = error
          })
        } else {
          this.error = 'Invalid ID'
        }
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
    .card-container {
      margin: 10px;
      padding: 10px;
    }
  &lt;/style&gt;
  
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import { db } from '@/main'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      items: null
    },
    getters: {
      getItems: state =&gt; {
        return state.items
      }
    },
    mutations: {
      setItems: state =&gt; {
        let items = []
        db.collection('items').orderBy('created_at').onSnapshot((snapshot) =&gt; {
          items = []
          snapshot.forEach((doc) =&gt; {
            items.push({ id: doc.id, title: doc.data().title })
          })
          state.items = items
        })
      }
    },
    actions: {
      setItems: context =&gt; {
        context.commit('setItems')
      }
    }
  })
  
  </code></pre>