grid-lanes (aka masonry)

[captainbrosset]

web-feature-id

masonry

Feature description

Pack items of varying heights into tightly stacked columns so shorter items rise to fill the vertical gaps left by taller neighbors, avoiding the ragged bottom edge of a standard grid.

Expected release date

Already in Safari. Coming soon in Chromium.

Coding agent assessment

Coding agents have zero knowledge of grid-lanes. They know about masonry very well, but don't know how to use grid-lanes to implement it.
They'll try other solutions, such as a multi-column layout, which is fine, but doesn't lead to the same order of items (filling columns one at a time, instead of stacking items near the top).
When asking to mimic "real" masonry as much as possible, they resort to using JavaScript.

[captainbrosset]

I'm happy to contribute a guide for this.
Here's a use case that illustrates what the guide could help with quite nicely: web-platform-dx/developer-signals#308 (comment)
It's not for everyone, but when your goal is to save on vertical space with tight packing, but it's not the end of the world if that doesn't work in all browsers, you can then use:

display: grid;
display: grid-lanes;

and benefit from the progressive enhancement.