Masonry Photo Grid (CSS Grid Lanes)

A Pinterest-style masonry gallery — cards of different heights packing into whichever column has the most room — with zero JavaScript and no measuring/reflow library, using native CSS Grid Level 3 masonry: grid-template-columns defines the fixed column tracks as usual, and grid-template-rows: masonry hands the packed axis to the browser, which places each item into the column with the most remaining space based on the items already placed. This replaces the classic 'Masonry.js / react-masonry-css measure every card's rendered height in JS, then absolutely-position it' pattern most masonry galleries still ship today. Real, current (2026), sourced via WebSearch, cross-checked across multiple independent queries (WebKit's own blog 'Help us invent CSS Grid Level 3, aka Masonry layout', Chrome for Developers' 'Brick by brick: Help us build CSS Masonry', MDN's 'Grid lanes layout' guide, and independent write-ups — modern-css.com's 'CSS Grid Lanes: Masonry Layout Without JavaScript', blakecrosley.com's 'CSS Grid Lanes: Native Masonry in Safari' — all describing the same grid-template-rows: masonry mechanism and citing the same shipping browser). **Cross-checked support, stated plainly rather than rounded up:** every source found agrees stable, unflagged support currently exists only in Safari 26.4 / iOS Safari 26.4 (shipped as grid-template-rows: masonry, per WebKit's own 'WebKit Features for Safari 26.4' post) — Chrome, Edge, Firefox, and Opera all still gate it behind an experimental flag as of this run, so this is explicitly NOT Baseline yet. One naming wrinkle worth stating honestly: several 2026 sources report the CSS Working Group is also discussing renaming the future spec surface to display: grid-lanes as the syntax debate continues, but what Safari 26.4 actually ships today, right now, is the grid-template-rows: masonry syntax used in this demo — this entry follows what's really shipped, not the still-unsettled future name. Degrades with zero risk: an @supports not (grid-template-rows: masonry) fallback declares an ordinary, non-packed grid-template-rows: masonry-free grid (equal-height rows, items just wrap in strict reading order) — never a broken, overlapping, or empty layout, exactly the same items and column count, just without the packing. No WebGL, no scroll-jacking, no JS at all — a pure declarative layout swap the cascade handles on its own. (Vanilla example: live iframe preview + HTML/CSS tabs.)

<div class="glm-grid">
  <div class="glm-card" style="height:120px">Card 1</div>
  <div class="glm-card" style="height:200px">Card 2</div>
  <div class="glm-card" style="height:90px">Card 3</div>
  <div class="glm-card" style="height:150px">Card 4</div>
  <div class="glm-card" style="height:70px">Card 5</div>
  <div class="glm-card" style="height:180px">Card 6</div>
  <div class="glm-card" style="height:110px">Card 7</div>
  <div class="glm-card" style="height:60px">Card 8</div>
</div>
<span class="glm-note">Packed columns need Safari 26.4+ — elsewhere this is still a full, complete grid, just laid out in plain equal-height rows instead.</span>