# e-oj/Magic-Grid

A simple, lightweight Javascript library for dynamic grid layouts.

Repository: https://github.com/e-oj/Magic-Grid
Canonical: https://ross.abutalabs.com/products/magic-grid
Homepage: https://www.npmjs.com/package/magic-grid
Language: JavaScript
License: MIT
License Family: permissive
Topics: grid, layout, grid-layout
Last push: 2024-09-04T15:48:54+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 2852, "days_push": 728, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 3152, forks 138 (observed 2026-08-28T04:07:46.200453+00:00)

## What it is
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
- artifact type: library
- maturity: maintenance
- function: ui-components, frontend-framework
- domain: frontend, web-development, web-design
- platform: browser
- tags: masonry-layout, grid-layout, lightweight, vanilla-js, css-grid-alternative, nodejs, javascript

## Member repositories
- e-oj/Magic-Grid (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:07:46.200453+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T18:45:34.696298+00:00, confidence not recorded.
  - readme: https://github.com/e-oj/Magic-Grid (fetched 2026-08-28T04:07:46.200453+00:00, sha 034ec5798443)
  - registry_npm: https://registry.npmjs.org/magic-grid (fetched 2026-08-29T09:40:31.408457+00:00, sha daabeac521ab)
- Data as of 2026-08-30T08:39:29.467469+00:00.