<svelte:head><script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script></svelte:head>
<script>
import {onMount} from 'svelte'
let grid, isotope;
let items = [
['1️⃣', 1],
['2️⃣', 2],
['3️⃣', 1],
['4️⃣', 2],
['5️⃣', 1],
['6️⃣', 1],
]
onMount(async () => {
isotope = await new window.Isotope(grid, {
itemSelector: '.grid-item',
layoutMode: 'fitRows',
sortBy: 'random',
})
})
</script>
<div class="grid" bind:this={grid}>
{#each items as [item, width]}
<div class="transition grid-item grid-item--width{width}" data-category="transition">
{item}
</div>
{/each}
...
</div>
<style>
.grid-item {
width: 25%;
background: blue;