I'm pleased they rename it because grid-lanes opens up more than masonry layouts.

I've been waiting to be able to have a fully responsive layout (where interleave sidebar content in with the page content on small screens, but have it in a sidebar on larger screens) without using any JavaScript, and this finally makes it possible.

Demo: https://codepen.io/pbowyer/pen/raLBVaV

Previous comment: https://news.ycombinator.com/item?id=46228993

The naming was half the discussion on implementing this. There were a lot of people smarter and more knowledgeable than me that had a lot of opinions on the name that I hadn't thought about. I remember one of the reasons was that the word "masonry" wasn't as obvious a concept for non-English speakers.

I’m old enough to have installed Safari on Windows XP. I’m not sure it has been enough years since this Apple failed product.

There are WebKit-based browsers for Linux: https://webkit.org/downloads/

This might actually happen indirectly. Kagi’s new browser uses WebKit. macOS only now, but eventually it’ll come to windows

It's been on-and-off in all three browsers behind flags etc, but it's been in a constant state of flux over the last three years. One of the most gnarly new CSS features to get right. Lots of great arguments about how to implement it.

I have too. And the Safari version that was in the betas/tech previews.

One of the biggest arguments over the last couple of years was what to call it. A lot, lot of ideas put forth as alternatives to "masonry" which wasn't thought to be great for non-English speakers. I'm glad they finally nailed a name for it!

The other big argument was over how to activate it. Is it a grid? Is it a flexbox? Is it a brand new animal?

Now I just need to figure out the best way to implement this semantically with a polyfill for the next 30 months until it's baseline.

I guess wire up a codepen demo and try it out. I know the guys writing this were well aware of all the edge cases like that and these are some of the absolute smartest CSS people you can think of who had to write the very detailed spec for this.

I don't think the smooth reflow made it into the current spec, so I guess watch this space?

https://www.w3.org/TR/css-grid-3/

I like Josh W Comeau's content, he has a lot of free articles, but his paid CSS course goes through step by step why CSS is the way that it is, worked great for me for understanding it all. My work paid for it though, that's why it's priced so high, but I'm sure he has discounts for individuals.

This should be a good start: https://nerdy.dev/cascading-secret-sauce

There are a lot of resources.

I am a fan of: https://www.youtube.com/@KevinPowell

Kevin is a no-nonsense no-hype educator. He will keep you up to date without a lot of engagement hacking.

I guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.

I suppose just checking scroll height of the container? Once you're x pixels above the bottom, fetch more. Not the smoothest, but doable

You just append new <figure> elements to the <main> in the example and it will automatically put them in the appropriate column.