Two axes, one model
Vertical columns and horizontal rows share logical placement semantics. Direction is projection, not source reordering.
grid-masonry 0.3.0
Deterministic masonry geometry for real content.
A platform-independent Core for vertical and horizontal layouts, with spans, measured whole-item footprints, predictable state, and thin React Web and Browser adapters.
Core: zero runtime depssource order preservedno hidden scroll policy
Live demo
The cells come from Core.
Change the semantic options; the browser only projects the returned geometry.
Whole-item geometry
Use an intrinsic ratio first, then bind a measured card footprint to Core's resolved cross size.
Intent without surprises
Preferred lanes are soft. Locks are hard logical lanes. Spans normalize responsively and never mutate input.
Host-owned lifecycle
Core calculates. React and Browser preserve identity. Hosts own DOM, measurement coordination, accessibility, and scroll.
Architecture
Small core. Clear boundaries.
host intent→Core geometry→React / Browser projection
Reserved regions, diagnostics, snapshots, stable reflow, queries, virtualization primitives, and optional flow tolerance stay generic and deterministic. There is no DOM, text RTL, product, or scroll policy in Core.
Placement
Spans, lanes, regions
Contiguous multi-lane spans, preferred or locked logical lanes, hard reserved regions, and all five accepted flow distributions compose in one placement kernel.
Explore placement →Stability
State that can explain itself
Validated checkpoints reject stale or tampered geometry. Stable reflow compares bounded candidates by actual displacement.
Explore state →Observation
Queries and diagnostics
Use linear or indexed flow queries, virtualization primitives, opt-in structured diagnostics, and displacement metrics.
Explore diagnostics →Install
Use the layer you need.
npm install grid-masonry-core
npm install grid-masonry-react react
npm install grid-masonry-browserBoundaries
Predictable by design.
Dense/backfill: deferredReact Native: deferredDOM/text RTL: host-ownedScroll mutation: host-ownedPackage release: 0.3.0