[jasonbarone]

So I love CSS Grid very much, but have found myself still wanting/needing masonry-style "Pinterest" layouts, which I haven't been able to do without JavaScript. I've seen many of the CSS column and flexbox hacks, but nothing quite nails it.

Anyone have any good ideas here?

[stareatgoats]

'Muuri' [0] is a masonry style library that looks promising (I haven't had time to dig deep though). It does however build on some js libraries but claims backward compability to IE9+. Maybe something for your needs (if js is unavoidable anyway)

[0]https://haltu.github.io/muuri/

[jonnyscholes]

CSS grid can do this! Sure not as freedom as a JS implementation but its good enough in 95% of scenarios in my experience! https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just one of the examples on codepen)

[colept]

Sorry, but this is not true masonry because the heights of the items are fixed. Masonry layouts have dynamic height elements.

[jonnyscholes]

Sorry I just linked to the first one that looked right as I was on the move. Flexible height is definitely possible as we're using it that in prod. Here's another examplei found with working flexible height :)

https://codepen.io/Kseso/pen/ZJbEMe/

[spiralx]

Until Houdini is available everywhere so that you can hook into the CSS engine and provide your own custom layout managers, I think masonry layouts will always require some JS. Using CSS grids might make the code simpler though.

PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...

[andrei_says_]

I’ve explored the same issue and masonry is the only solution I’ve found.