Preact Masonry Grid

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

• 🪶 Lightweight. ~1.7 kB (minified and brotlied). Zero dependencies except Preact.
• ⚡ 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

import { BalancedMasonryGrid as MasonryGrid, Frame } from '@masonry-grid/preact'

function Gallery() {
  return (
    <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/preact
# or
npm i @masonry-grid/preact
# or
yarn add @masonry-grid/preact

Docs

• Guides
• API Reference
• Examples