Native CSS Masonry Gallery — Free grid-template-rows: masonry Demo

<div class="demo-wrap">
  <p class="demo-note">This gallery uses the native CSS masonry layout (<code>grid-template-rows: masonry</code>) in browsers that support it &mdash; currently Firefox. Everywhere else, an <code>@supports not</code> fallback switches to a column-based masonry technique so the layout still looks like masonry, not a broken grid.</p>

  <div class="masonry-grid">
    <div class="m-card h1">Northern Lights, Iceland</div>
    <div class="m-card h2">Terraced Rice Fields</div>
    <div class="m-card h3">Old Town at Dusk</div>
    <div class="m-card h4">Desert Road, Wide Open</div>
    <div class="m-card h1">Harbor Fog, Early Morning</div>
    <div class="m-card h2">Market Street Stalls</div>
    <div class="m-card h3">Glacier Blue</div>
    <div class="m-card h2">Rooftop Garden</div>
    <div class="m-card h1">Coastline From Above</div>
    <div class="m-card h4">Alleyway Lanterns</div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body{font-family: system-ui, -apple-system, sans-serif; background: #f4f2ec; color: #26221a; min-height: 100vh;display:flex;align-items:center;justify-content:center}

.demo-wrap { max-width: 920px; margin: 0 auto; padding: 36px 20px 60px; }
.demo-note { font-size: 12.5px; color: #6b6455; line-height: 1.6; background: #fff; border: 1px solid #e6e1d3; border-radius: 10px; padding: 12px 14px; margin-bottom: 20px; }
.demo-note code { font-family: 'SFMono-Regular', Consolas, monospace; color: #b45309; }

.m-card {
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, #c98a3f, #7a4e1e);
  box-shadow: 0 8px 20px rgba(60,40,10,0.12);
}
.m-card.h1 { height: 150px; }
.m-card.h2 { height: 220px; background: linear-gradient(160deg, #4d7c8a, #244854); }
.m-card.h3 { height: 190px; background: linear-gradient(160deg, #8a5cf6, #4527a0); }
.m-card.h4 { height: 260px; background: linear-gradient(160deg, #2e8b57, #16452a); }

/* ---- Native CSS masonry ----
   grid-template-rows: masonry hands row placement to the browser's
   masonry algorithm instead of the normal grid row-track algorithm:
   items pack into whichever column has the least content so far,
   producing the classic staggered "waterfall" look with a single CSS
   property and no JS measuring pass. This is genuinely experimental —
   as of 2026 it ships in Firefox (behind stable support there) and is
   not yet shipped in Chromium or WebKit, both of which are pursuing an
   "item-flow" based alternative proposal instead. */
@supports (grid-template-rows: masonry) {
  .masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 16px;
  }
}

/* ---- Fallback: manual column-based masonry ----
   The long-standing CSS technique using the multi-column columns
   property. Each card becomes a column item; break-inside: avoid stops a
   card being visually split across two columns. It reads top-to-bottom
   within a column rather than left-to-right across the grid, which is a
   real, known difference from true masonry — but it still produces a
   staggered waterfall look with zero JavaScript and works everywhere. */
@supports not (grid-template-rows: masonry) {
  .masonry-grid {
    columns: 4 200px;
    column-gap: 16px;
  }
  .m-card {
    break-inside: avoid;
    margin-bottom: 16px;
  }
}

// No JavaScript required for either layout path: native masonry is a pure
// CSS grid feature, and the columns() fallback is pure CSS too. No JS
// measuring pass, no ResizeObserver, no re-layout logic to maintain.