How to display Mobile Squarespace Galleries as a single column with CSS

In an ever-growing series of blog posts aimed at alleviating some truly irritating Squarespace quirks, we’ve arrived at how you can tailor Squarespace Galleries to display images in a single column.

In a recent web design project, we used several Squarespace Galleries to showcase various aspects of the project, and until we undertook our pre-flight checks on mobile screen sizes, we thought the site was looking good.

The issue is that by default, Squarespace sizes its galleries to a minimum of 2 columns…which looks absolutely gross if you have an uneven number of images in the gallery.

If you’re proactive in your troubleshooting, you may have tried using the following code to remedy Squarespace’s annoying default:

/*Doesn't work*/
.gallery-grid-wrapper{
  grid-template-columns: repeat(1, 1fr) !important;
}

If you dig a bit deeper into the DOM, you’ll notice a warning sign that says “Invalid property” with the CSS having been rendered with whitespace between the property value: “1 fr”. It’s definitely the whitespace that’s causing the issue; we think it has something to do with how Squarespace’s CSS editor interprets the “repeat” function…but we could be completely wrong.

Anyway, here’s the solution:

/*Does work*/
.gallery-grid-wrapper{
  grid-template-columns: repeat(auto-fill, 100%) !important;
}

I hope this helps - Will :)