V-for循环，在满足条件时也会断行

Question

我正在尝试创建一个网格，每行最多显示3或4张卡片，具体取决于列表中有多少项。我可以在一行中显示所有项目，但是如何在多行/行中将其拆分？

尝试在v布局上使用“列”或“行”时，只会给我一个或另一个。

代码如下：

<template>
    <v-container grid-list-md text-xs-center>
      <v-content>
    <div>
      <ToolBar showIcons/>
    </div>
        <div class="dashboardPadding">
          <v-layout align-center justify-center row fill-height v-for="(item, i) in items" :key="`${item}-${i}`">
            <template >
              <v-flex xs3 >
                <v-card class="cardStyle">
                  <v-toolbar dark class="backgroundStyle" >
                    <v-toolbar-title class="toolbarStyle">

                      {{item.item_id}}

                    </v-toolbar-title>
                  </v-toolbar>
                  <v-card-text class="cardTextStyle">
                    <v-icon size="90">{{item.item_name}}</v-icon>
                  </v-card-text>
                </v-card>
              </v-flex>
            </template>
          </v-layout>
        </div>
      </v-content>
    </v-container>
</template>

<script>

import ToolBar from '@/components/component/ToolBar'
import { when } from 'q';


 let interval = null;    

  export default {

      components: {
        ToolBar
    },
    methods: {

      },
      beforeMount(){

        this.$cookie.get('token')


      },
       data () {

      return {

        items: [
              {
                item_id:1,
                item_name:"name",
              },
             {
                item_id:2,
                item_name:"name",
              },
             {
                item_id:3,
                item_name:"name",
              },
             {
                item_id:4,
                item_name:"name",
              },
            ],
    }, 
  }

</script>

<style scoped>
.backgroundStyle{
  background: linear-gradient(90deg, #6A1B9A, #CE93D8);
  height: 35px;
}
.cardStyle{
    height: 150px;
    cursor: pointer;
}
.toolbarStyle{
  padding-bottom: 10%;
  padding-top: 5%;
  padding-left: 0%
}
.cardTextStyle{

  font-size: 3em;
  font-weight: bold;
  display: block;

}
.dashboardPadding{
  padding-top: 15%;
}
</style>