Masonry Grid

[![ESM-only package][package]][package-url]
[![NPM version][npm]][npm-url]
[![Install size][size]][size-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
[package-url]: https://nodejs.org/api/esm.html

[npm]: https://img.shields.io/npm/v/%40masonry-grid%2Fvanilla.svg
[npm-url]: https://npmjs.com/package/@masonry-grid/vanilla

[size]: https://deno.bundlejs.com/badge?q=%40masonry-grid%2Fvanilla
[size-url]: https://bundlejs.com/?q=%40masonry-grid%2Fvanilla

[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/masonry-grid/tests.yml?branch=main
[build-url]: https://github.com/TrigenSoftware/masonry-grid/actions

[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/masonry-grid.svg
[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/masonry-grid

A fast, lightweight, and responsive masonry grid layout library in vanilla JavaScript.

- 🪶 Lightweight. ~1.4 kB (minified and brotlied). Zero dependencies.
- ⚡ Fast. Direct DOM manipulation 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_

``html



`bash
pnpm add @masonry-grid/vanilla


or

Docs

- Guides
- API Reference
- Examples