https://i.sstatic.net/d0gji.png
//1st column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//2nd column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//3rd column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//.. copy paste up to 5th column
What is a more effective way to approach this problem rather than repeatedly writing the same HTML/CSS block multiple times?
Could we utilize a two-dimensional for-loop to generate this grid layout with less code? For example:
for(var i =0;i<3; i++){
for(var j =0;j<3; j++){
//create your 2d cards here
}
}
Expected result: https://i.sstatic.net/APddj.png