Masonry Gallery [+ only]
Masonry-style gallery of images.
Note: This module is only available in Framework+, a paid version of Framework.
View a live demo of this module.
Content
- Add any number of mages
- Change spacing between images
- Change the number of columns to show on desktop, laptop, tablet, and mobile
Styles
- Change border radius of images
Usage Guide
The Masonry Gallery module creates an eye-catching, Pinterest-style image layout that automatically arranges your photos in a dynamic grid pattern. Unlike traditional gallery modules that force images into uniform rows, this module preserves each image’s original aspect ratio while creating an organic, flowing arrangement that’s perfect for showcasing portfolios, project galleries, or company culture photos.
This module works exceptionally well on about pages, portfolio sections, and case study pages where you want to display multiple images without the rigid structure of a standard grid. SaaS and technology companies often use it to showcase their team, office spaces, product screenshots, or client work in a visually appealing format that breaks up text-heavy content.
When adding the Masonry Gallery to your HubSpot page, drag it from the module sidebar into any flexible column on your page. The responsive column controls are particularly valuable here – you can display four columns on desktop for maximum impact, then automatically scale down to two columns on tablet and one column on mobile for optimal mobile viewing.
Pro tip: For the best visual results, upload images with varying heights but similar widths. This creates the most dynamic masonry effect. Images that are too uniform in dimensions will appear more like a standard grid, while dramatically different sizes might create awkward gaps.
The spacing controls allow you to create either a tight, seamless mosaic effect or add breathing room between images to match your site’s overall design aesthetic. Combined with the border radius settings, you can achieve anything from sharp, modern layouts to softer, more approachable gallery presentations that align with your brand guidelines.