Vue.js 如何修复vuejs中的网格问题

在vuejs中，我无法使用v-for生成网格css，我使用了模板网格列，因此我可以在同一行中有3个div，但结果是一行中只有一个div，这不是我想要的结果，因此是否有任何最佳解决方案可以使用，下面是代码 这是html部分：

<template>
    <div>
    <div>
            <select class="select"  v-model="status">
            <option value="onSale">onSale</option>
            <option value="featured">featured</option>
      </select>
      <caption>Total {{computedProducts.length}} Products</caption>
    <div  class ="productListing" v-for="(product, index) in computedProducts" :key="index">
        <div class="singleProduct box effect1">
      <h1>{{product.name}}</h1>
        <h1></h1>{{product.color}}
          {{product.featured}}
        </div>
    </div>
    </div>
    </div>
    </template>

出售
作为特色的
总计{{computedProducts.length}}个产品
{{product.name}
{{product.color}
{{product.featured}

vuejs部分：

          <script>
    // @ is an alias to /src

    export default {
      name: 'home',
    data() {
        return {
          status: [],
          products: [
            {name:'test1', color:'red', size:'XL',status:"featured"},
            {name:'test2', color:'black', size:'L',status:"onSale"},
            {name:'test3', color:'red', size:'L',status:"featured"},
          ],

        }
      },
      computed: {
        computedProducts: function () {
          return this.products.filter((item) => {
                   return   (this.status.length === 0 || this.status.includes(item.status))
          })
        }
      }
    }
    </script>
    css part : 
    <style lang="scss" scoped>
    .productListing {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    .box {
        background:#FFF;
        margin:40px auto;
    }
    /*==================================================
     * Effect 1
     * ===============================================*/
    .effect1{
        -webkit-box-shadow: 0 10px 6px -6px #777;
           -moz-box-shadow: 0 10px 6px -6px #777;
                box-shadow: 0 10px 6px -6px #777;
    }
    $green: #2ecc71;
    $red: #e74c3c;
    $blue: #3498db;
    $yellow: #f1c40f;
    $purple: #8e44ad;
    $turquoise: #1abc9c;
    .select {
    border: 0.1em solid #FFFFFF;
    margin: 0 0.3em 0.3em 0;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
      }
    </style>

//@是/src的别名
导出默认值{
姓名：'家'，
数据（）{
返回{
状态：[]，
产品：[
{名称：'test1'，颜色：'red'，大小：'XL'，状态：'featured'}，
{名称：'test2'，颜色：'black'，大小：'L'，状态：'onSale'}，
{名称：'test3'，颜色：'red'，大小：'L'，状态：'featured'}，
],
}
},
计算：{
computedProducts:函数（）{
返回此.products.filter（（项目）=>{
返回（this.status.length==0 | | this.status.includes（item.status））
})
}
}
}
css部分：
.productListing{
显示：网格；
网格模板列：1fr 1fr
}
.盒子{
背景：#FFF；
利润率：40px自动；
}
/*==================================================
*效果1
* ===============================================*/
.效果1{
-网络工具包盒阴影：0 10px 6px-6px#777；
-moz盒阴影：0 10px 6px-6px#777；
盒影：0 10px 6px-6px#777；
}
$green:#2ecc71；
$red:#e74c3c；
$blue:#3498db；
$yellow:#f1c40f；
$purple:#8e44ad；
$绿松石：1abc9c；
.选择{
边框：0.1米实心#FFFFFF；
保证金：0.3em 0.3em 0；
边界半径：0.12em；
框大小：边框框；
文字装饰：无；
字体系列：'Roboto'，无衬线；
}

---

提前感谢您的帮助

您的栅格效果将显示在它的子项下，而不是它本身。 您需要为您的产品添加一个父div，如下所示

<div class="productListing">
    <div v-for="(product, index) in computedProducts" :key="index">
        ......
    </div>
</div>

.productListing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}