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:

1npm install grid-rows-masonry

Usage

1. Define a grid container with multiple columns:

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

2. Import the module and initialize it:

1import { Masonry } from "grid-rows-masonry";
2
3const el = document.getElementById("my-grid");
4const masonry = new Masonry(el);

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

1masonry.destroy();

Usage with React

To use the Masonry React component exported from grid-rows-masonry/react:

1. Import the component:

1import { Masonry } from "grid-rows-masonry/react";

2. Use the component in your React application, ensuring to set the display: grid style:

1const MyGrid = () => {
2  return (
3    <Masonry style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
4      ...
5    </Masonry>
6  );
7};

This component will automatically handle the masonry layout for its children.

Example

Grid layout with the Grid Rows Masonry ponyfill applied.