Mason-it is a lightweight JavaScript library that instantly transforms a standard CSS grid into a responsive masonry layout while fully respecting your existing grid-template-columns, gap, and other styles.
The example below doesn't come from the gallery element but features a simple Div containing images. This Div is set up as a CSS grid and is transformed into a masonry layout using Mason-it.
Important: If your grid contains images, do not enable the lazy-mode option. If you have enabled it, make sure to set the width and height HTML attributes for each image.
How to transform a grid into a masonry
The setup is quite straightforward. Simply load the main library from a CDN or copy the file to your server. Next, create a CSS grid and add the data-mason-it attribute to it.
Example with a Div Element
First, set the layout to grid and ensure that the Advanced option "Item Vertical Alignment" is set to Start. In CSS, this corresponds to `align-items: flex-start`.
Next, add the `data-mason-it` attribute.
That's it! Your grid will be transformed into a masonry layout!
Example with the Post Loop Builder, Repeater & Post List elements
The Post Loop Builder, Repeater, and Post Lists elements all have a masonry option. However, this feature can be unstable and may even break the layout in some cases.
To use Mason-it with these elements, simply select the Grid layout and add an ID. This allows us to apply the necessary CSS and initialize the script. Note that we cannot use the data attribute method here, as the CSS grid is not directly applied to these elements but rather to their children.
IMPORTANT: In the Post Loop Builder, this masonry option does not work when the filter bar option is enabled, as that option already utilizes a different masonry library.
Finally, in the initial Code Block, add the following CSS and JavaScript snippets:
align-items: start;
}
MasonIt.init('#myCoolMasonry .bde-loop-grid');
More info in the official Mason-it page : https://druh.in/mason-it/