HOW TO: “True” masonry layout

Implementing the masonry layout with flexbox and a hint of JavaScript

I’ve previously written about achieving the masonry layout effect and how to implement a pure CSS solution leveraging various techniques (that can be seen here).

The biggest drawback with a pure CSS solution is ordering. Most people implementing a masonry layout in their projects want the classic left to right chronological ordering. It’s a common question about the pure CSS solution, “How can I order the items from left to right, 1, 2, 3?”. Unfortunately, this just doesn’t seem possible with a pure CSS solution. Not in a generic and dynamic sense at least 👎

So how can we create this “true” masonry layout with the correct ordering? We can still leverage CSS features but we’re going need a hint of JavaScript to get it just right 😎

For those in camp TL;DR who want to see this “true” masonry layout in action, here’s a demo 🤓

If you scroll to the bottom, you can see a demo with React and also a demo with loading…