Masonry polyfill

This package provides an absolutely tiny (0.6KB) polyfill for css grid-template-rows: masonry or grid-template-columns: masonry.

registerMasonry is a function that takes in an HTMLElement and adjusts the top margins of its children to achieve masonry layout for browsers that don't support it yet.

Nothing happens in browsers that support masonry.

Just define the masonry in css with your preferred css framework/authoring method and run this function one for the grid element.

install:

``shell
npm install masonry-pf
`

`shell
yarn add masonry-pf
`

`shell
bun add masonry-pf
`

Usage

$3

Pass registerMasonry to the ref of your grid and set the css styles as if your browser supports masonry.

`jsx
import { registerMasonry } from 'masonry-pf';

function Masonry({ children }) {
return (
className="grid grid-rows-[masonry] grid-cols-1 md:grid-cols-3 gap-4"
ref={registerMasonry}
>
{children}