@prof-dev/masonry

CSS Grid masonry polyfill

A simple, easy-to-use solution for creating masonry-style grids with CSS Grid. This library checks for support of grid-template-rows: masonry in the browser. If unsupported, it automatically adjusts item placement to simulate a masonry layout.

It supports any grid-template-columns configuration and allows flexible use of @media queries to adjust column layouts.

Note: This polyfill does not implement any packing algorithms. The original order of items will be preserved.

Demo

Installation

npm i @prof-dev/masonry

Example

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  align-items: start;
  gap: 12px;
}

const grid = document.querySelector(".masonry-grid");

if (grid !== null) {
  new Masonry(grid);
}