Skip to content

Latest commit

 

History

History

preact

README.md

Preact Masonry Grid

Logo

ESM-only package NPM version Install size Build status Coverage status

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