{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreidfcyutj7tbl6awfrkved2mw7b6r3iyhl2bo3m7zlepotwxvfbvme",
    "uri": "at://did:plc:p4kwlos6xhec5x7pyuusdfat/app.bsky.feed.post/3mofkcosozar2"
  },
  "path": "/journal/22613",
  "publishedAt": "2026-06-16T10:03:52.000Z",
  "site": "https://adactio.com",
  "tags": [
    "CSS Grid Lanes",
    "declarative design",
    "The Field Guide to Grid Lanes",
    "CSS Day",
    "a great talk",
    "The Session",
    "events",
    "sessions",
    "an event",
    "a session",
    "@supports",
    "@media"
  ],
  "textContent": "CSS Grid Lanes has started to ship in browsers. It’s in Safari and behind a flag in Chrome and Edge.\n\nIt enables masonry layouts, where items get packed together in the most efficient way possible.\n\nUnsurprisingly, 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.\n\nThere’s a handy website called The Field Guide to Grid Lanes where you can play around with possibilities.\n\nAt 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…\n\nOver 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.\n\nSidenote: 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.\n\nAnyway, 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.\n\nThis 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.\n\nTake a look at an event or a session in Safari to see what I mean.\n\nHere’s the CSS that creates a carousel:\n\n` .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; } `\n\nAnd here’s the media query that turns it into a masonry layout:\n\n` @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%; } } } `\n\nI’m using `all: initial` to unset the previous styles, which is a bit of a sledgehammer but it works.\n\nI 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.\n\nOh, 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.",
  "title": "Enhancing with CSS Grid Lanes"
}