svelte-masonry

A lightweight and dependency-free Masonry component for Svelte, based on the article by Ana Tudor (@anatudor) on CSS Tricks.

Originally coded by janzheng and updated by edde746.

Installation

npm install @edde746/svelte-masonry

Usage

import Masonry from "@edde746/svelte-masonry";

<Masonry update={itemCount} stretchFirst>
  {#each data.slice(0, itemCount) as o}
    <div class="card">
      <header>
        <h3>{o.name}</h3>
      </header>
      <section>
        <p>{o.text}</p>
      </section>
    </div>
  {/each}
</Masonry>

Note: Make sure to update the itemCount variable whenever you want to update the layout.

Props

| Prop | Type | Default | Description | |---------------|--------|-----------|----------------------------------------------------------------| | stretchFirst | bool | false | Whether the first item should stretch across all grid columns. | | gridGap | string | "0.5em" | The gap between grid items. | | colWidth | string | "minmax(min(20em, 100%), 1fr)" | The width of the grid columns. | | update | any | | A variable to trigger layout updates. | | rearrange | bool | false | Whether to rearrange the grid items to best fill vertical space. |

Functions

refreshLayout()

Use this function to manually trigger a layout refresh. This might be useful in cases when the content of the grid items changes.