svelte

Svelte Masonry Grid

A fast, lightweight, and responsive masonry grid layout library for Svelte.

• 🪶 Lightweight. Zero dependencies except Svelte.
• ⚡ Fast. Built on top of @masonry-grid/vanilla with optimized reflow algorithms.
• 📱 Responsive. Automatically adapts to container size changes using ResizeObserver.
• 📘 TypeScript-first.

Read the docs and explore examples at masonry-grid.js.org

<script>
  import { BalancedMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/svelte'
</script>

<MasonryGrid
  frameWidth={200}
  gap={10}
>
  <Frame width={4} height={3}>
    <img src='https://picsum.photos/400/300' alt='Photo 1' />
  </Frame>
  <Frame width={1} height={1}>
    <img src='https://picsum.photos/200/200' alt='Photo 2' />
  </Frame>
  <Frame width={3} height={4}>
    <img src='https://picsum.photos/300/400' alt='Photo 3' />
  </Frame>
  <Frame width={3} height={4}>
    <img src='https://picsum.photos/300/400' alt='Photo 4' />
  </Frame>
  <Frame width={1} height={1}>
    <img src='https://picsum.photos/200/200' alt='Photo 5' />
  </Frame>
  <Frame width={4} height={3}>
    <img src='https://picsum.photos/400/300' alt='Photo 6' />
  </Frame>
</MasonryGrid>

Install

pnpm add @masonry-grid/svelte
# or
npm i @masonry-grid/svelte
# or
yarn add @masonry-grid/svelte

Docs

• Guides
• API Reference
• Examples