e-oj/Magic-Grid

Health v2 · maintenance only

Flags: no_releases

Adoption not part of the score

3152 stars · 138 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

Magic Grid is a lightweight JavaScript library for creating dynamic, masonry-style grid layouts. It automatically repositions grid items of varying heights within a specified container, requiring only a container selector and change listeners.

Use cases

• build a masonry-style image gallery with variable-height items
• lay out user-generated content cards of unequal heights
• create a Pinterest-like dynamic grid layout
• avoid whitespace gaps in CSS grid rows with mixed-height items
• add a responsive dynamic grid to a vanilla JS project without heavy dependencies

When to choose

• you need a lightweight, dependency-free masonry layout in plain JavaScript
• your grid items have equal width but varying heights
• CSS Grid or Flexbox leaves uneven whitespace with dynamic content

When to avoid

• your items have equal heights - plain CSS Grid or Flexbox suffices
• you need a full-featured layout framework like Isotope with filtering and sorting
• you need items of varying widths - the library requires uniform item width

Facets

library · maturity maintenance

ui-components frontend-framework frontend web-development web-design browser masonry-layout grid-layout lightweight vanilla-js css-grid-alternative nodejs javascript

Member repositories

For agents

markdown · JSON · MCP: product_card(name="e-oj/Magic-Grid")