How to Display Gallery Grid in One Column on Mobile in Squarespace
Gallery Grid Layout by Squarespace is a great way to lay out the grid in a uniform multi-column style on Desktop. But on mobile, the two-column default view can feel a bit cramped, particularly with many portrait-oriented photos, artwork, or minimalist galleries. Rather than having your images vie for space, a one-column layout provides each piece with the breathing room it deserves.
With a few lines of CSS, you can turn your Squarespace gallery into a clean, one-column layout on mobile, making your site a bit polished and user-friendly.
The solution? A simple CSS tweak to force the Gallery Grid into a clean, 1-column layout on mobile.
Why Use a Single Column on Mobile?
| Benefit | Description |
|---|---|
| Cleaner Layout | No squished or uneven image rows |
| Better Focus | Highlights each image with more breathing room |
| Enhanced Portrait Image Display | Perfect for vertical art, photography, or prints |
| Improved Tap Target | Easier for users to interact with images |
Step-by-Step: Apply a 1-Column Gallery Grid on Mobile
Step 1: Open Custom CSS Panel
In your Squarespace site editor, go to
Pages → Custom code → Custom CSS
Step 2: Paste the CSS Code
Use this CSS to force one column on screens smaller than 768px:
@media (max-width: 767px) {
.gallery-grid.gallery-grid--layout-grid .gallery-grid-wrapper {
grid-template-columns: 1fr !important;
}
}
| Code Part | Purpose |
|---|---|
.gallery-grid--layout-grid |
Targets only the grid-style galleries |
.gallery-grid-wrapper |
The actual grid container for images |
grid-template-columns: 1fr |
Defines a single flexible column layout |
@media (max-width: 767px) |
Applies only to mobile devices |
!important |
Overrides Squarespace’s default responsive CSS |
Optional Enhancements
Add spacing between images (gap):
@media (max-width: 767px) {
.gallery-grid.gallery-grid--layout-grid .gallery-grid-wrapper {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
Apply to specific gallery section only:
@media (max-width: 767px) {
section[data-section-id="your-section-id"] .gallery-grid-wrapper {
grid-template-columns: 1fr !important;
}
}
Replace "your-section-id" with the actual ID (you can inspect it in your browser).
Final Result
When it comes to mobile, it's all about simplicity and clarity. By fixing your Squarespace Gallery Grid into a single-column grid at smaller screen sizes, you'll reduce the noise, give your images room to breathe, and prevent your mobile users from getting frustrated every time they tap a thumbnail.
Photographer, artist, or shop owner: use this small CSS tweak to make sure your gallery looks purposeful and professional on all devices. A cleaner mobile design not only improves UX but also boosts overall brand representation.
Frequently Asked Questions
-
Squarespace’s desktop settings frequently reduce gallery grids to 2 columns on mobile view. This saves a lot of space, but it can mean that, especially if you’re showing portrait-style photos, they look cramped or lopsided.
-
A single column gives a cleaner, more focused look. It allows space for each image, assists with vertical photography, and makes the tap targets more generous and friendly for a user.
-
Yes. By specifying the gallery ID of the section that you want to target, the one-column layout will be applied only to that specific gallery on the page and not all other galleries.
-
No. That adjustment is wrapped in a mobile-only rule so that the desktop and tablet galleries will continue to be masonry (multi-column) and only the mobile view will be single column.
-
Absolutely. You can set or adjust the gap (spacing) between images vertically and horizontally, too, so each image has enough “breathing space” and so everything looks deliberate and polished.
