Journal tags: masonry

CSS Grid Lanes has started to ship in browsers. It’s in Safari and behind a flag in Chrome and Edge.

It enables masonry layouts, where items get packed together in the most efficient way possible.

Unsurprisingly, I’m a fan of a layout tool where the browser does all the hard work. It very much aligns with the idea of declarative design; you specify the boundary conditions, and then browser does the maths and heavy lifting.

There’s a handy website called The Field Guide to Grid Lanes where you can play around with possibilities.

At the most recent CSS Day, Patrick Brosset gave a great talk showing what you could do with Grid Lanes. I immediately started playing around with it, and I spotted what I think could be a useful pattern…

Over on The Session, I added a little enhancement to the events and sessions listings recently. I make a call to the Google Places API to see if I can find a match for the venue, and if I do, pull in some photos.

Sidenote: right now there’s a major issue with this. None of the photos come with text descriptions. This is something I need to fix, and I’ve got some ideas on how to do that.

Anyway, these photos are just nice-to-haves so I’ve tucked them away into a details element with a simple summary like “Ten photos” or “Twenty photos”. If you open up that details element you get the photos in a horizontal swipable row. A carousel, if you will.

This works fine, but on larger screens I think it would be okay to show all the photos at once. That’s where Grid Lanes comes in.

Take a look at an event or a session in Safari to see what I mean.

Here’s the CSS that creates a carousel:

.gallery {
    display: flex;
    align-items: center;
    inline-size: fit-content;
    max-inline-size: 100%;
    overflow-inline: auto;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
.gallery > * {
    flex-shrink: 0;
    scroll-snap-align: center;
}

And here’s the media query that turns it into a masonry layout:

@supports (display: grid-lanes) {
    @media all and (min-width: 56em) {
        .gallery {
            all: initial;
            display: grid-lanes;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 0.5em;
        }
        .gallery > * {
            inline-size: 100%;
        }
    }
}

I’m using all: initial to unset the previous styles, which is a bit of a sledgehammer but it works.

I think this could be a useful responsive design pattern. Masonry layouts are great for large screens but kind of rubbish for small screens where you end up with just a single column. Carousels aren’t much cop on large screens but maybe have their place on small screens where real estate is at a premium.

Oh, and needless to say, this is a progressive enhancement. If a browser doesn’t yet understand display: grid-lanes it continues to get the carousel layout.