How to loop through data a certain number of times in Svelte

Question

I've successfully connected my app to supabase - and it's fetching data from a table I've recently setup.

I've got the law-firm names appearing in a card template, so there's a seperate card for each h3 being pulled in.

I want to be able to loop through my database, and after fetching 4 sets of data (the law-firm name) I want to create a duplicate row underneath - fetch another 4 and continue this way (I'll sort out the pagination at a later date).

Any help would be appreciated as this is the first time I've used Svelte - and I've gone through multiple SO posts, as well as the svelte-kit documentation.

<script>
    export let data;
</script>

<ul class="flexCards">
    {#each visibleLawFirms as LawF}
        <li class="cardShape">
            <h3>{LawF.lawfirmname}</h3>
        </li>
    {/each}
</ul>

Answer 1

So there was no need for additional Javascript to resolve this - some css Grid did the trick.

.flexCards {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    list-style-type: none;
}