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. I want to run a masonry layout of recent news posts. Have left-to-right scan reading. NOT use JS to control or manipulate the view (no DOM manipulation with JS, for example). Use CSS column-count. It’s effective, simple and gets me close out of the box. No div-itis. One parent .wrapper for all .items in the layout. The Solution Using the React demo here, , you can grok what’s going. https://github.com/jessekorzan/masonry-css-js 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. The main take away here... Not intending this to be a tutorial, here’s the gist of what’s happening: Grab some content (pseudo feed in JSON) Re-order the array of content so that the flow appears left-to-right Render the view 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: column-count: X… the array re-order routine requires a matching X My demo is in React, but you can adapt the JS array re-order routine for anything Without some help from my teammates, I’d have never come up with the JS re-order routine (thanks NickB) 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. Which is what I need to keep moving forward with my current effort on a feature. And the DOM is 100% CSS. — 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

Flow

Routine

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Jesse Korzan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Jesse Korzan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES