Provides 'Masonry' style layouts as an option for rendering the contents of panel panes.
Masonry rendering will re-pack panes in your panel to minimize vertical space and provide column-like appearance while the items are still in natural (horizontal) order on the page.
With "Responsive" layouts happening everywhere, the Panels approach of locking everything into a grid can provide a bit of a dilemma, because your column count is pretty static. But the Panels approach of letting an editor drop elements into a page in certain zones still works well in some cases.
Using this module, you may be able to get the best of both worlds.

Usage
- Using Panels pages or Panels nodes, choose a layout that has a large central content zone.
- Place your page elements into it, eg a dozen node teasers, just one after the other.
- Enable the Masonry Panels module, and set up its dependencies
- Edit the Panel content, and choose 'Masonry' as a display option for the region.
- Edit the regions settings to give your content items a fixed width appropriate to your design OR work out your responsive CSS and breakpoints to define appropriate widths for these panel panes.
Result: your blocks should now 'Pack' into that panel region nicely.
Requirements
This builds on the Masonry API module that provides Drupal Library support for the Jquery Masonry library.
As at 2014-11, you must either
- use Masonry API module 7.x-2.0 stable and the older 2.1.08 version of JQuery Masonry from http://desandro.github.io/masonry/
- OR, use Masonry API module development upgrade patch from this issue and Masonry V3 from http://masonry.desandro.com/
(note, if swapping between these two different options, you need to flush your cache hard to empty the libraries paths)
See the Masonry API project for updates and further instructions. Remember to check your Drupal "status report" after installing to ensure your requirements are right.
Background
See also teckilah's sandbox: Panels Masonry - an earlier version of this task, that used masonry v1.0.02, but did not use Drupal libraries for managing this, so wasn't suitable to build on. Some code structure was yoinked from there though.
Other code credits go to Masonry Views (by BWPanda) where I found the bits needed to plug in to the library properly.
| Attachment | Size |
|---|---|
| Masonry in effect at different screen sizes on a 'Panels' page | 141.94 KB |
Project information
- Project categories: Content display
33 sites report using this module
- Created by dman on , updated
Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.

