Grid-rows-masonry NPM

Grid Rows Masonry

Overview

Grid Rows Masonry is a ponyfill for the CSS masonry layout, designed for browsers that don’t yet support it. It simulates the effect of grid-template-rows: masonry; by reordering child elements and applying negative top margins, ensuring each item neatly aligns under the one above it while preserving the grid’s row gap.

Installation

Install via npm:

npm install grid-rows-masonry

Usage

Define a grid container with multiple columns:

<div id="my-grid" style="display: grid; grid-template-columns: repeat(3, 1fr);">
  ...
</div>

Import the module and initialize it:

import { GridRowsMasonry } from "grid-rows-masonry";

const el = document.getElementById("my-grid");
const masonry = new GridRowsMasonry(el);

To reset the layout, call the destroy() method:

masonry.destroy();

To use the module with React:

import { useEffect, useRef } from "react";
import { GridRowsMasonry } from "grid-rows-masonry";

const MyMasonryGrid = () => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const masonry = new GridRowsMasonry(ref.current);
      return () => masonry.destroy();
    }
  }, []);

  return (
    <div
      ref={ref}
      style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}
    >
      ...
    </div>
  );
};