I spent some time trying to build a simple grid layout with dynamic width and height items in order for the layout to naturally flow responsively. Most librarie

I spent some time trying to build a simple grid layout with dynamic width and height items in order for the layout to naturally flow responsively. Most libraries—like this one—require fixed width items or fixed width containers with fluid items. Fully responsive turned out to be a lot harder than I thought it would be due to lots of rabbit holes, but the algorithm was fairly straightforward. My first approach was to try CSS Flex and Grid, but they didn't cut the mustard since they're not really designed for this sort of thing. I then found CSS Columns and had that working, but it proved too unstable for production use with issues with the sort order of items, wrapping across columns, and cross-browser support. I ended up building our own library: https://github.com/heydovetail/react-masonry-responsive https://github.com/heydovetail/react-masonry-responsive There's a nice brief writeup about using CSS for masonry layout here: https://regisphilibert.com/blog/2017/12/pure-css-masonry-layout-with-flexbox-grid-columns-in-2018/ https://regisphilibert.com/blog/2017/12/pure-css-masonry-lay...