Add an extra column to your Squarespace grid portfolio

Portfolio section with 5 columns. Logo designs shown here are by me.

If you are a creative entrepreneur, like a photographer, graphic designer, or maybe a web designer like me, showing examples of your work to your potential clients is so important. One of the ways that you can do that in Squarespace is by using one of their portfolio pages.

Recently, I was creating a grid overlay portfolio for a branding expert so she could show off her logo designs. We decided that they would look great using an overlay or hover style grid with the logos going right to the edges of the page (I’ll give you the code for that in this blog too), but I found there was a problem.

The squares just looked too big on the desktop view. So, I decided to add another column. Well, I was out of luck here too, as I already had it at 4 columns and that was the upper limit to the amount of columns you could choose for a grid portfolio.

So, it was time to add some custom code!

How to add an extra column to the Squarespace grid portfolio

I looked at my page code using my browser developer tools (you can find it in both Chrome & Firefox) and found the element that I needed to change - the grid template columns. And, I changed the code to make 5 columns:

.portfolio-grid-overlay{grid-template-columns: repeat(5, minmax(0,1fr));}

Next step was to check how this was working on every device. Five columns looked great on desktop, but when I went over to see the mobile it wasn’t so great.  It was also showing 5 tiny little columns. And I mean Tiiiiii-ny.

I realised I was going to have to add a media query to specify what devices would show 5 columns.

I figured that the portfolio would look great with its original 4 columns on a portrait or vertically positioned tablet. I also liked the original size for mobile. So, I needed to show 5 columns only on devices that wider than a vertical tablet. I set the media query to cover anything bigger than 768 px wide.

@media only screen and (min-width: 768px)
{.portfolio-grid-overlay{grid-template-columns: repeat(5, minmax(0,1fr));}}

Now my portfolio is showing only one image per row on smaller mobiles. Perfect!

The complete code

To make your portfolio grid full bleed with an extra column:

1. Copy the following code:

//full bleed grid overlay portfolio
.tweak-portfolio-grid-overlay-width-full .portfolio-grid-overlay 
{padding:0px!important;}

//5 columns
@media only screen and (min-width: 768px)
{.portfolio-grid-overlay{grid-template-columns: repeat(5, minmax(0,1fr));}}

2. Go to the Home panel of your website

3. Click Design, then click Custom CSS

4. Paste code

5. Click Save

A little extra…

Are you looking to have lines between your portfolio images, and on the sides and top, like they are in my example? Give your portfolio section a different colour background from your images. Then, in the section options, give the portfolio a vertical spacing and horizontal spacing of 1px. Finally, change the padding of the full bleed portfolio to 1px. And, you have grid lines!

---

Don’t want to do it yourself? Let’s work together to make it easy!

I’ll take care of the design, coding and details, while you get back to business.

---