CSS Grid Lanes

Props to the Safari team. They surprised us all when they suddenly shot to the top of interop-2025 this October

https://wpt.fyi/interop-2025

I wish they'd release CSS Gap Decorations: https://developer.chrome.com/blog/gap-decorations

I'm tired of having to use stupid hacks to get nice-looking borders between flex/grid items.

This is exciting to see! I just used Masonry for a project this past week. While it works quite well and is pretty performant, it is pretty hacky using absolute positioning, wanting to know the aspect ratios of objects beforehand for smoother layout, and having to recalculate everything on resize. I'm looking forward to having a generally available native option one of these days.

That makes sense. Safari is so smooth now in iOS. Moved from Firefox.

There is an element of tragic comedy to those announcement. While remarkable on their own, everybody knows that one cannot use any new browser feature reliably any time soon due to Apple not shipping continuous updates to the browsers they force upon their users.

I always thought that the masonry layout looked good but made it harder to get a good overview of the images.

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

I wonder how long it takes LLMs to correctly ingest fresh CSS notation like this.

Maybe this will be an unpopular opinion, but I really dislike the lane layout, because it is not possible to efficiently take a glance at all elements in the list, one by one.

If you try to go left-to-right, you will quickly realize that at the end of each "line" it is really difficult to know where the next line starts. It is easy to accidentally start again on the same line (and inspect the same elements), or skip one accidentally. Then navigating through the elements one by one requires a considerable amount of cognitive effort, your eyes bounce up and down constantly, and you end up inspecting the same elements multiple times.

If you try to go top-to-bottom, lane by lane, you will then realize that the page also has infinite scroll and you will never go past the first lane.

Kinda odd they didn't call it masonry given it's already been called that forever. At least grid-lanes is reasonably self explanatory.

I think Apple should make Safari stable downloadable option for all platforms.

Very cool! I wonder, will it be easy to build interactive interfaces on this primitive, like animations and drag-and-drop?

I've run the masonry layout (for my personal bookmark website) ever since I've found it in the browser settings.

grid-template-rows: masonry;

is going to be outdated then?

I have often thought layouts should be done by a constraint solver. Then there could be libraries that help simplify specifying a layout, which feed constraints to the solver.

I have to ask, like with all the other browser specific trial implementations: how is cross platform support? If we wanted to make a grid layout that only worked in one browser engine, grid-template-rows: masonry was there for a while now.

Chromium still seems to be working on support it seems based on https://cr-status.appspot.com/feature/5149560434589696 so maybe it'll be useful soon? That page indicates that they're still discussing certain parts of the spec.

I've been using Chromium's display: masonry in some internal apps since they introduced it behind a flag in Chromium 140. Looks like they just have to rename it now?

how does it work with animations? like if i transition:all and then remove a middle img does the other elements get animated?

How would you query the location where you need to load more data when scrolling down (the highest empty spot)?

Is there anything to be said about accessibility? Found the word only once in the comments.

Masonry grid layout was one of a few interviewing pair programming tests I would give to frontend engineers. I need to see how this works under the hood!

What’s the best resource for getting a handle on all modern CSS for someone who hasn’t paid attention since flex box

sweeeeeeeeeeeet

Is anyone working on actual css problems instead of this sugar syntax?

Hypermedia suffers because these marketing companies waste time on making sure they can build Pinterest in 10 LoC instead of fixing actual long running hypermedia domains.

Oh, how cool! Another barrier to a new browser gaining user base!

I don't understand all the busywork goes behind new browser updates, just to retain their market share (since they can afford more engineers, than say Ladybird). Is this needed? It's not rocket science, folks.

To quote the wise Karl Pilkington: "Do we need 'em?"

HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?

Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers).

Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here).

At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too? But they seem not to.

For example, the demo page linked in the article fails pretty unusably for me. All the images take up nearly the full viewport width.