<script>
let pets = [
{ id: 'OUtn3pvWmp1', name: 'Cat1' },
{ id: 'OUtn3pvWmp2', name: 'Cat2' },
{ id: 'OUtn3pvWmp3', name: 'Cat3' },
{ id: 'OUtn3pvWmp4', name: 'Cat4' },
{ id: 'OUtn3pvWmp5', name: 'Cat4' },
{ id: 'OUtn3pvWmp6', name: 'Cat6' },
{ id: 'OUtn3pvWmp7', name: 'Cat7' },
{ id: 'OUtn3pvWmp8', name: 'Cat8' },
{ id: 'OUtn3pvWmp9', name: 'Cat9' },
{ id: 'OUtn3pvWmp10', name: 'Cat10' },
{ id: 'OUtn3pvWmp11', name: 'Cat11' },
{ id: 'OUtn3pvWmp12', name: 'Cat12' },
//{ id: 'OUtn3pvWmp13', name: 'Cat13' },
];
</script>
<style>
.row {
display: grid;
grid-columns: 4;
}
.card{
background-color: gray !important;
color: white;
border-radius: 10px;
border-color: #404040;
padding-left: 15px;
padding-right: 15px;
}
.card-group {
display: flex;
}
</style>
<h1>EXPECTED OUTPUT, BY LOOP OVER cats </h1>
{#each pets as pet, i}
{#if i % 4 === 0}
<div class="row">
<div class="card-group">
<div class="card">{pets[i].name}</div>
<div class="card">{pets[i + 1].name}</div>
<div class="card">{pets[i + 2].name}</div>
<div class="card">{pets[i + 3].name}</div>
</div>
</div>
{/if}
{/each}
I would like cat13 item display in the another row ,anyone please give some trick.
I am using sveltejs 3
My runnable script here