Live Demo: https://masonry-css-js.netlify.com/
CSS column-count for masonry-style layouts is dead easy (couple lines of CSS and very minimal markup to get it going).
The problem (sometimes) is the way the content flows (see the diagram above). Typically, I want a left-to-right scan reading experience, i.e. cards of blog post summaries with the most recent posts to appear at the top of the view. I also don't want to use JS for the layout. Pure CSS... all the way.
The only "help" that JS provides is re-ordering the array before rendering to the view so that we can use CSS column-count for the layout. Again, for example, this array could be a feed of recent news posts.
Check the demo: here
Check out the code: react component
Post on Medium: Easy CSS Masonry Layout w/ Left-To-Right Content Flow
Special thanks to my Klue teammate @nickb for figuring out the array re-order (and in a way even I could understand).
This project was bootstrapped with Create React App.
Here's the guide here.
