how to fix grid issue in vuejs

Question

in vuejs i cant make grid css with v-for , i used template-grid-columns so i can have 3 divs in same row but the result was just one div in one row and this is not the result i want, so is there any optimal solution i can use, here is the code this is the html part :

<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>

vuejs part :

          <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>

thank you in advance for your help

Answer 1

You grid effect would appear under it children instead of itself. You need to add one parent div for your products, like below

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

CSS would be

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