A masonry contact sheet

The homepage grid crops every photo to a 1:1 square: object-fit: cover drops each one into the same cell. CSS Grid Lanes (display: grid-lanes, shipped in Safari 27; see the Safari 27 notes) lays the columns on a grid but stacks the rows masonry-style, so a portrait and a landscape sit side by side at their true heights. No JavaScript lays anything out, no media queries fire.

checking display: grid-lanes

Loading the pool…


Same markup both ways. One line differs: display: grid-lanes behind an @supports guard, with EXIF pinning each photo's aspect-ratio so nothing reflows as the images load. Browsers without Grid Lanes fall back to the squares. Still a prototype: the live homepage ships the squares.