Add Left and Right Padding to Gallery Grid in Squarespace
In Squarespace 7.1, Gallery Grid blocks will typically show images across the page edge to edge and in full-width layouts. As bold as this aesthetic is, it can sometimes become constraining and claustrophobic, namely on a desktop.
If you want to create a bit more space around your gallery images, you can accomplish this by adding some horizontal padding using a little CSS snippet.
Why Add Padding?
Applying a little side padding to your gallery grid:
Improves readability and composition
Generates whitespace for all images and the screen edges
Gives your layout a more finished, intentional look
How to Add Padding to All Gallery Grids
Step 1: Open the Custom CSS Panel
From your Squarespace dashboard:
Go to Pages → Custom code → Custom CSS
Step 2: Paste the Following Code
/* Add left and right padding to all Gallery Grid blocks */
.gallery-grid.gallery-grid--layout-grid {
padding-left: 10vw;
padding-right: 10vw;
box-sizing: border-box;
}
Customize as Needed:
Replace 10vw with values like 40px, 5%, or 2rem for tighter or looser spacing
box-sizing: border-box ensures the padding doesn’t overflow the container
Preview & Test
After saving the CSS:
Refresh your pages with gallery grids
Check spacing on desktop, tablet, and mobile
Adjust the padding value if needed to match your brand’s layout style
Final Thoughts
This global CSS update is a quick and effective way to enhance your visual hierarchy and content flow. It helps galleries look more balanced, especially when paired with generous whitespace and consistent spacing.
Whether you're showcasing artwork, product photography, or brand visuals, giving your content room to breathe always improves the user experience.
Frequently Asked Questions (FAQ)
1. Will adding padding affect all gallery grids across my Squarespace site?
Yes, it takes the change across sites if you’re doing it from the Custom CSS panel. If you only wish to target one particular gallery, you should look into the section IDs, or you could also duplicate the block and set another custom options there.
2. Is there one where I can set padding for specific screen sizes?
Yes. Although there aren’t specific padding options for each device in Squarespace, you can adjust your padding with percentage values or relative units of measurement, which scale properly on desktops, tablets, and phones. This way, your design will stay aesthetic on every device.
3. Will this extra margin create space between the images in my gallery?
No- The padding is added all around the entire Gallery block, not between the actual individual images. If you’d like a different space between images, use the Gallery Design → Spacing options in the block editor instead.
4. Is there a way I can preview my padding changes before making them live?
Absolutely. You’re able to fine-tune in Design → Custom CSS if you like, or through the block interface, and preview using Squarespace’s device preview mode (desktop, tablet, and mobile) to tweak before you click Save.
