Masonry Layout

Approach Comparison

Three viable techniques in this stack — each with a different trade-off profile.

1. CSS Columns Masonry

Uses the CSS columns property — the simplest approach, zero JS. Items flow top-to-bottom within each column. Add break-inside: avoid on each card to prevent mid-card column breaks. Caveat: reading order follows columns not rows (A→B→C down col 1, then D→E→F down col 2).

2. CSS Columns — Responsive Auto Width

columns: 16rem tells the browser "fit as many 16 rem columns as possible" — no breakpoints needed. Resize the window to watch it reflow from 1 → 2 → 3+ columns.

Equivalent CSS: columns: 16rem; column-gap: 0.75rem;

3. JS Masonry — Alpine + CSS Grid Row Span

Preserves source order (left→right across columns) and works with images. The grid uses 1 rem auto-rows; Alpine measures each card's natural height and sets grid-row-end: span N so it occupies the correct number of row tracks. Re-runs on window resize.

4. Gap Control

Gap between cards affects visual density and the feel of the layout. Small gaps suit editorial/news grids; larger gaps suit portfolio or lifestyle content.

5. Content Density

Masonry shines when card heights vary significantly. These scenarios test the layout under realistic conditions.

6. Interactive Playground

Adjust technique, column count, and gap. The CSS snippet updates live.

7. Edge Cases

Scenarios that expose weaknesses — know them before choosing a technique.