Drupal is a registered trademark of Dries Buytaert
Protected Pages 3.0.0 Major update available for module protected_pages (3.0.0). Commerce Core 3.3.8 Minor update available for module commerce (3.3.8). Layout Builder Reorder 2.0.1 Minor update available for module layout_builder_reorder (2.0.1). Ban 1.1.0 Minor update available for module ban (1.1.0). Field Formatter Range 2.0.0 Major update available for module field_formatter_range (2.0.0). Field Formatter Range 8.x-1.8 Minor update available for module field_formatter_range (8.x-1.8). UI Patterns (SDC in Drupal UI) 2.0.18 Minor update available for module ui_patterns (2.0.18). Varbase FAQs 9.2.1 Minor update available for module varbase_faqs (9.2.1). Search API Solr 4.3.11 Module search_api_solr updated after 14 months of inactivity (4.3.11). Provus Mega Menu Module provus_mega_menu crossed 1,000 active installs.

Masonry API

8,019 sites Security covered
View on drupal.org

This module provides an API to integrate the Masonry JavaScript library with Drupal. It allows for flexible grid layouts by arranging content elements optimally based on available space, similar to how a mason lays stones. Additional sub-modules can be used to apply this functionality to specific parts of your site, such as fields or views, but you will need to provide your own CSS for styling.

Provides an API for integrating the jQuery Masonry plugin with Drupal.

From desandro.github.io/masonry:

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

As this is an API module, you will likely want to download some of the sub-modules below that implement this API to provide Masonry functionality to various parts of your site.
Additionally, no styling is provided by this API module or any of the sub-modules. You will need to add your own CSS as described here.

Sub-Modules

Drupal 8/9 indications:

Install and manage dependencies - option 1

Check documentation on how to handle external dependencies here: https://www.drupal.org/docs/develop/using-composer/manage-dependencies#t...

Install and manage dependencies via composer - option 2

1. Install the module itself :
composer require drupal/masonry

2. Install wikimedia/composer-merge-plugin :
composer require wikimedia/composer-merge-plugin

3. Edit your "merge-plugin" section under "extra" in your *root* composer.json so it looks like:

  "extra": {
   "merge-plugin": {
      "include": [
         "modules/contrib/masonry/composer.libraries.json"
      ]
   }
}

Beware to change the path to your contrib module folder if under web or docroot for instance

4. Run a locked update, or a module update:
composer update --lock
composer update drupal/masonry

Install and manage dependencies manually - option 3

1. Download and unzip masonry module from https://www.drupal.org/project/masonry
and place it into /modules/contrib folder.

2. Download and unzip masonry from http://masonry.desandro.com/
and place it into /libraries folder so the following path exists
/libraries/masonry/dist/masonry.pkgd.min.js

3. Download and unzip imagesloaded from http://imagesloaded.desandro.com/
and place it into /libraries folder so the following path exists:
/libraries/imagesloaded/imagesloaded.pkgd.min.js

Drupal 7 indications:

jQuery Compatibility

The Masonry plugin requires jQuery v1.6 or greater.
As Drupal 7 only ships with jQuery v1.4.4, you'll need to upgrade jQuery to a later version. You can do this by installing one of the following modules:

Required Modules

Installation

  1. Download and enable the required modules listed above
  2. Update jQuery (see 'jQuery Compatibility' above)
  3. Download the Masonry plugin :
    • v2 with branch 2.x. Rename the file to be located at : /sites/.../libraries/masonry/jquery.masonry.min.js
    • v3 with branch 3.x. Rename the file to be located at :
      /sites/.../libraries/masonry/masonry.pkgd.min.js
  4. Branch 3.x only: you need to create a directory for imagesloaded in the libraries directory and then download the imagesloaded library from http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js. Rename it to be located at :
    /sites/.../libraries/imagesloaded/imagesloaded.pkgd.min.js
  5. Download and enable Masonry API (and optionally any sub-modules, see above)
  6. Check /admin/reports/status to ensure the Masonry plugin was properly detected

Activity

Total releases
1
First release
Aug 2025
Latest release
11 months ago
Releases (12 mo)
1 ▲ from 0
Maintenance
Slowing

Releases

Version Type Release date
4.1.0 Stable Aug 5, 2025