Masonry Gallery
A set of images arranged in a flexible grid pattern.
View a live demo of this section.
Modules
How to Use This Section
The Masonry Gallery section creates a dynamic, Pinterest-style layout where images of different sizes arrange themselves in an optimal grid pattern. This section works particularly well for professional services firms showcasing project portfolios, event companies displaying venue photos, or B2B organizations presenting case study visuals.
When to Choose Masonry Over Standard Galleries
Select the Masonry Gallery when your images have varying aspect ratios and you want to maintain their original proportions without cropping. Unlike traditional grid galleries that force uniform sizing, the masonry layout adapts to each image’s dimensions, creating visual interest through varied heights and widths.
Setting Up Your Masonry Gallery
After dragging this section onto your page in the HubSpot page editor, you’ll configure the Masonry Gallery module settings. Upload your images through the module’s content options, where you can add alt text for SEO and accessibility. The theme automatically handles the responsive behavior, ensuring your gallery looks polished on desktop, tablet, and mobile devices.
Content Strategy Tips
For optimal visual impact, mix landscape and portrait orientations in your image selection. Include 6-12 images to create sufficient visual density without overwhelming visitors. Consider file sizes carefully—the Masonry Gallery’s appeal can be diminished by slow loading times. HubSpot’s built-in image optimization helps, but starting with web-ready images improves performance.
Page Type Recommendations
This section performs exceptionally well on about pages, portfolio pages, and service landing pages where visual storytelling supports your conversion goals. The engaging layout encourages visitors to explore multiple images, increasing time on page and supporting your SEO efforts.