Masonry Gallery
Flexible masonry-style gallery that can be used to feature images and videos.
View a live demo of this module.
Content
- Add as many gallery items (image and popup videos) as you need
- Adjust position of feature item (left or right)
- Adjust gap between items
- Adjust how many rows the feature item spans
- Adjust how many columns appear on mobile
Styles
- Change border radius of images
- Change color of video play button
- Change color of video overlay
How to Use This Module
The Masonry Gallery module is perfect for creating visually engaging product showcases, portfolio displays, and multimedia presentations on your HubSpot pages. Unlike traditional grid galleries that force uniform sizing, this module intelligently arranges your images and videos in an organic, Pinterest-style layout that maximizes visual impact while maintaining clean organization.
You’ll find this module particularly effective on landing pages, product category pages, and about pages where you need to showcase multiple items without the rigid constraints of standard gallery layouts. The masonry approach automatically handles images of varying dimensions, creating a professional look even when your content doesn’t follow consistent aspect ratios.
When adding this module through the HubSpot page editor’s drag-and-drop interface, start by uploading your highest-quality images first, as the module’s algorithm uses these to establish the optimal grid foundation. The featured item positioning is especially powerful for highlighting your most important content—place your hero image or primary video in the featured position and experiment with left versus right alignment based on your page’s overall visual flow.
For mobile optimization, take advantage of the column adjustment settings to ensure your gallery remains scannable on smaller screens. Two columns typically work best for mobile devices, preventing images from becoming too small to appreciate.
Pro tip: Mix images and videos strategically rather than clustering all videos together. The masonry algorithm creates more balanced compositions when multimedia content is distributed throughout your gallery items. This approach also improves page engagement by creating natural stopping points as users scroll through your content.
The customizable video overlay and play button styling helps maintain brand consistency across your HubSpot site while ensuring your interactive elements remain accessible and visually prominent.