How to: 5/6/n columns for portfolios in Squarespace

The problem

Squarespace only allows up to 4 columns for portfolios.

The solution

All portfolios / globally

Copy this code to Pages › Website Tools › Custom CSS. Edit column numbers as needed:

/* n-columns for portfolio code by opsqs.com */

/* edit here */
:root {
  --portfolio-columns: 6;
  --portfolio-columns-tablet: 3;
  --portfolio-columns-mobile: 2;
}
/* stop editing */

.portfolio-grid-basic,
.portfolio-grid-overlay {
  @media (max-width: 767px) {
    grid-template-columns: ~"repeat(var(--portfolio-columns-mobile),minmax(0,1fr))" !important;
  }
  
   @media (min-width: 767px) and (max-width: 1023px) {
     grid-template-columns: ~"repeat(var(--portfolio-columns-tablet),minmax(0,1fr))" !important;
  }
  
  @media (min-width: 1023px) {
      grid-template-columns: ~"repeat(var(--portfolio-columns),minmax(0,1fr))" !important;
  }
}

On a single page

Open page settings (click a small cog near the page). Copy the code to Advanced  ›  PAGE HEADER CODE INJECTION. Edit column numbers as needed:

<style>

/* n-columns for portfolio code by opsqs.com */

/* edit */
:root {
	 --portfolio-columns: 6;
	 --portfolio-columns-tablet: 3;
	 --portfolio-columns-mobile: 2;
}
/* stop editing */

 @media (max-width: 767px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns-mobile),minmax(0,1fr)) !important;
	}
}
 @media (min-width: 767px) and (max-width: 1023px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns-tablet),minmax(0,1fr)) !important;
	}
}
 @media (min-width: 1023px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns),minmax(0,1fr)) !important;
	}
}
 </style>