Thoughts on Masonry (Pinterest) Layout
February 21, 2018
As I was working yesterday afternoon, I came across this post on Twitter.
Are we still using Masonry for multi-gridded photo layouts? All the CSS Grid / Flexbox examples I’ve seen for Masonry have the photos still lining up on bottom edges….and CSS Columns still aren’t too stable right? @jensimmons ? @zeldman ?
— Amber Weinberg Jones (@amberweinberg) February 20, 2018
I had done some research into this in the past so I decided to reply.
If you want a Pinterest type layout, you need to use Masonry. Grid and Flexbox don’t let you achieve that type of layout.
— Jeff Bridgforth (@webcraftsman) February 20, 2018
CSS Columns will only work if you have a set height on the parent div.
— Jeff Bridgforth (@webcraftsman) February 20, 2018
Then someone replied to me.
Why not? I just did a quick test and it seemed to work as I'd hoped. Maybe I'm missing something?
— Chris Ferdinandi ?? (@ChrisFerdinandi) February 20, 2018
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.