syedpeer / masonry-css-js

CSS masonry layout, only needs JS to re-order an array, no DOM manipulation

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

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 Solution

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.