The Masonry Grid Plugin transforms your image lists into beautiful, responsive Pinterest-style galleries with just a few clicks. Built with Tailwind CSS and modern JavaScript, this plugin offers two distinct layout variations to suit different design needs.
Variation 1 (CSS Masonry) uses native browser masonry capabilities with CSS columns fallback, providing organic flowing layouts where images naturally fill available space from left to right, top to bottom.

Variation 2 (Masonry With Balanced Columns) employs a Flowbite-inspired approach with intelligent height balancing, creating more uniform column heights for cleaner bottom alignment.

Both variations feature hover effects, loading states, error handling, and seamless click interactions. Configure column count and spacing using Tailwind gap classes. The plugin automatically handles responsive behavior and cross-browser compatibility. Perfect for portfolios, product galleries, image collections, and any scenario requiring elegant image display with interactive functionality.

The grid can only show images. However, because we've included an element id field, you can map each image to its corresponding row of data in the database. For example, you could click an image in the masonry grid layout and open a popup or redirect to another page will all of that products details (price, description etc).

Exposed states and events enable seamless integration with Bubble workflows.