Easy CSS Masonry Layout w/ Left-To-Right Content Flow

React Demo: CSS column-count + array reordering

Live Demo: https://masonry-css-js.netlify.com/

React: https://github.com/jessekorzan/masonry-css-js

JQuery: https://github.com/jessekorzan/css-masonry

The problem… column-count works great except for left-to-right scan reading

Masonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.

Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.

There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.

For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived and constrained JS solution. This often takes the design off course (opportunity costs) or produces an awkward handoff with the real engineers. “Dude, srsly? 213 lines in jQuery to display some boxes?”

The Problem

My problem is relatively mundane.

1. I want to run a masonry layout of recent news posts.
2. Have left-to-right scan reading.
3. NOT use JS to control or manipulate the view (no DOM manipulation with JS, for example).
4. Use CSS column-count. It’s effective, simple and gets me close out of the box.
5. No div-itis. One parent .wrapper for all .items in the layout.

The Solution

Using the React demo here, https://github.com/jessekorzan/masonry-css-js, you can grok what’s going.

The main take away here... You can use CSS column-count “as is” for a masonry layout. If you want a nice left-to-right scan reading experience, you simply re-order the array of content before you render to the DOM.

Not intending this to be a tutorial, here’s the gist of what’s happening:

1. Grab some content (pseudo feed in JSON)
2. Re-order the array of content so that the flow appears left-to-right
3. Render the view
4. CSS styling hooks (column-count) produces a nice cleanly ordered masonry layout

https://masonry-css-js.netlify.com/

Magic algo to re-order the array BEFORE output to DOM

Couple notes:

1. column-count: X… the array re-order routine requires a matching X
2. My demo is in React, but you can adapt the JS array re-order routine for anything
3. Without some help from my teammates, I’d have never come up with the JS re-order routine (thanks NickB)
4. To be responsive… it needs a little more JS (if you didn’t want just a single-column layout at narrower breakpoints)

So there you have it. And the DOM is 100% CSS. Which is what I need to keep moving forward with my current effort on a feature.

—

I share this here for other “designers who code”. Maybe it helps in a prototype or reduce the cringing when the brief has that line… you know that line.

“A Pinterest-style layout is required because ____________ and __________.”

—

Live Demo: https://masonry-css-js.netlify.com/

GitHub: https://github.com/jessekorzan/masonry-css-js