Skip to main content
Drupal is a registered trademark of Dries Buytaert
Release: OpenID Connect / OAuth client 3.0.0-alpha9 New alpha version released for module openid_connect (3.0.0-alpha9). Usage Milestone: Google Analytics Module google_analytics crossed 1,000 active installs. Release: Timelinr 1.0.1 Minor update available for module timelinr (1.0.1). Release: GraphQL Compose Codegen 1.1.2 Minor update available for module graphql_compose_codegen (1.1.2). Release: Mapy.com 1.1.3 Minor update available for module mapycom (1.1.3). Release: Ckeditor5 entity browser 3.0.3 Minor update available for module ckeditor5_entity_browser (3.0.3). Release: Ckeditor5 entity browser 3.0.1 Minor update available for module ckeditor5_entity_browser (3.0.1). Release: Ckeditor5 entity browser 3.0.2 Minor update available for module ckeditor5_entity_browser (3.0.2). Release: Teamleader Integration 4.0.2 Minor update available for module teamleader (4.0.2). Module Revived: Entityqueue Buttons 1.1.2 Module entityqueue_buttons updated after 8 months of inactivity (1.1.2).

Masonry API

7,558 sites Security covered Drupal 8–11
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

Depends on

Dependencies of the latest stable release

No dependencies recorded for this project.

Required by

1 tracked project depends on this one

Activity

Tracked releases
1
Tracked since
Aug 2025
Latest release
1 year ago
Releases (12 mo)
0 ▼ from 1
Maintenance
Dormant

Releases

Version Type Core Release date
4.1.0 Stable 8–11 Aug 5, 2025