how to fix grid issue in vuejs - vue.js

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);
}