4 ms·
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.
by jasonbarone 9y ago
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?
- andrei_says_ 9y agoI’ve explored the same issue and masonry is the only solution I’ve found.
- spiralx 9y agoUntil 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...
- jonnyscholes 9y agoCSS 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 https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just one of the examples on codepen)
- colept 9y agoSorry, but this is not true masonry because the heights of the items are fixed. Masonry layouts have dynamic height elements.
- jonnyscholes 9y agoSorry 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/ https://codepen.io/Kseso/pen/ZJbEMe/
- stareatgoats 9y ago'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/ https://haltu.github.io/muuri/