Center align grid gallery content Squarespace

There are various reasons why you might use a grid gallery block on Squarespace. Some of the most common ways include featuring previous clients logos or to create a “featured in” section to showcase your coverage. 

Usually gallery blocks will be laid out to showcase the images in rows. So for example three rows of four images. 

If you have a number that doesn’t easily break up into a set amount of rows however, it can start to look a bit unaesthetic.

For example, if you have 12 client logos to display, you might decide to put them into three rows of four. If you only have 10 logos though, you would end up with two rows of four and one row of two…still with me?

The problem is that Squarespace will automatically left-align those two logos on the last row, which in my opinion looks a bit rubbish. 

(Of course you could just bypass this problem and do two rows of five, however sometimes adding an additional image to a row can make all the images appear too small). 

Luckily, with a really simple bit of code you can centre align that last line of images, without impacting the lines above. 

Watch the video

Check out the YouTube video below 👇

How to centre align grid gallery content on Squarespace 

First things first you need to add your gallery block and ensure it’s specified to be a grid gallery. Make sure you add your images to your gallery at this point too. 

Then, navigate to your Custom CSS panel and add in the following code:

.sqs-gallery-block-grid .sqs-gallery-design-grid {

display: flex;

justify-content: center;

flex-wrap: wrap;

}

If you want your final line to align to the left or right, simply change the justify-content on the last line of the code to wherever you want the content to align.

---

📩 Join the inner circle to get exclusive code updates

---

Don’t forget to hit save and your final line of images within your grid gallery will be centre aligned. 

This is a really simple bit of code but it makes sure that if ever there is an odd number of images in a line within a grid gallery, they will always centre align, making everything look neater and more professional. 

If you’re sick of your grid gallery content not being centre aligned, try out this code and let me know how you get on!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?