How to do masonry gallery block on Squarespace
A masonry gallery is a type of layout that arranges your images in a grid format with different sizes and ratios. This style of gallery allows for more flexibility in the layout and can make your images content more engaging.
In this post, I will guide you how to create a masonry grid gallery on Squarespace via three different methods. The first 2 methods is free, and the last method is done by using paid Squarespace plugin.
Each method has its pros and cons, so you have the option to choose the method that best suits your needs and preferences. We will guide you through the step-by-step tutorials and provide you with all the information you need to generate a masonry grid gallery on your Squarespace website.
By default, Squarespace supports a Masonry Gallery layout on Summary blocks and Gallery sections, on its Gallery blocks, only Grid layout with images of the same size and dimensions arranged uniformly.
Create Masonry Gallery block
Method 1: Using Summary block
With wall summary blocks, the images are displayed in a masonry-styled grid, this is built-in feature of Squarespace so you don’t have to pay for a Squarespace plugin and it can work with Personal plan!
With this method, you will need to insert your image into a Blog, and choose that Blog when inserting the Summary block on your page. The Summary block Wall layout features a fixed two-column display.
Step-by-step included on this post Reuse Gallery images with 7.1 Summary block
Method 2: Using Gallery section
Squarespace Gallery sections has a layout named Grid: Masonry, to insert a Gallery section on an existing page on your site:
Click Edit on the page.
Click Add Section above or below an existing section.
Click Images and choose a layout with an i badge in its top-right corner.
Insert a Masonry layout Gallery section
With this Gallery section layout, you can change the number of columns and spacing of the images, also Lightbox can be enabled to show your images in a enlarged popup. But in this post we are focusing create a Masonry Gallery block, so that we can display it along with other blocks and content such as text blocks, luckily for us, Beyondspace has developed this Freebie Squarespace plugin that allows display Gallery section inside a code block.
The details steps can be found on Gallery block workaround
Create the Masonry Gallery section
Grab its ID
Replace the ID in the Code snippet and put it inside a Code block
That’s it! Now your Gallery section now can stays inside another section along with other blocks
For this method to work, you will a Business plan or higher to place the custom code injection.
Method 3: Using paid plugin
With a small fee, you can use the plugin Masonry Style Squarespace Gallery Plugin to create a Masonry layout to your Gallery block, beside the price paid for the plugin, you will also need a Business plan or higher.
Masonry style Gallery block
This Squarespace masonry gallery plugin is a convenient and cost-effective solution for those who want to add a masonry gallery to their Squarespace website without writing custom code.
Summary
I’ve put together a table to compare those solutions
| Method | Price | Columns | Squarespace Plan |
|---|---|---|---|
| Using Summary Block | Free | Fixed | Personal |
| Using Gallery Section | Free | Flexible | Business |
| Using Paid Plugin | Small fee | Flexible | Business |
FAQs on Masonry Gallery block
Question: Can I enable lightbox for Masonry Gallery block
Except Solution 1 with Wall Summary block, you can enable lightbox for the Gallery blocks and Gallery sections in the two later method, and those Galleries are fully compatible with Lightbox Studio - Premium Squarespace lightbox zoom plugin, allow you to pinch-to-zoom your gallery images on the lightbox and provide extra features like thumbnails and download
Question: I can not insert a Gallery block on my Squarespace 7.1 template
I feel you! That why I created a Freebie Squarespace plugin Classic Gallery block to help you overcome that limitation and insert the Gallery block to your Squarespace 7.1 sections
