Thoughts on Masonry (Pinterest) Layout

February 21, 2018

As I was working yesterday afternoon, I came across this post on Twitter.

I had done some research into this in the past so I decided to reply.

Then someone replied to me.

So it made me stop and think about my answer. Actually, my second response was not true. It is not CSS Columns but Flexbox which I was thinking about. You can somewhat emulate a masonry (Pinterest) layout in Flexbox but you have to have a set height on the parent container. You set the flex direction to columns and enable it to wrap. I believe this is one of the articles I came across in my research.

I worked on a project two years ago that called for a masonry (Pinterest) layout. As I did research, I was hoping that there was a way to do it with Flexbox and not have to rely on a JavaScript solution. [In the end, I used Masonry by David Desandro.]

I did find solutions that used Flexbox and some that used CSS Columns.

  • But one drawback with using either one of these layout methods is that the items were vertical down a column and then back up to another column. Not quite what I was looking for.
  • Another drawback to the Flexbox solution is that you had to set a defined height on the parent container in order for the items to wrap to another column. Most of the projects I work on use a CMS and the number of items in the layout is variable. So a fixed height solution is not very practical to the work that I do.

What About Grid

As I began learning CSS Grid last year, I wondered if it could achieve a Masonry layout. CSS Grid has defined rows so it cannot have the overlap that the Masonry layout is known for. You can kinda fake a Masonry layout with grid-auto-flow: dense but you still have the rows. Here is an example from Rachel Andrews. Not quite the Masonry look. And you have to explicitly place things on the grid. Once again, not a very practical solution for the work that I tend to do.

There is an interesting discussion about this on Rachel Andrew’s CSS Grid Ask Me Anything. Wes Bos asked her about using CSS Grid for a masonry (Pinterest) layout.

Use Masonry

If you want a masonry (Pinterest) layout, the best tool for the job is Masonry by David Desandro. Masonry is a JavaScript grid layout library. It has great documentation. I have used it on several different projects and highly recommend it.

Addendum: The Future?

Last night after I posted, I got this tweet from Amelia Bellamy-Royds.

https://twitter.com/ameliasbrain/status/966507527599939585

The thread is an interesting discussion. Both of my modern CSS layout heroes, Rachel Andrew and Jen Simmons weigh in on the discussion. Worth a read.

Comments are closed.