How do I change the number of columns in the Squarespace product grid?

Squarespace 7.1 uses CSS grid for product listings. The .ProductList-grid container controls how many columns display. You can override this with a custom grid-template-columns value.

Make sure to add a responsive breakpoint so mobile devices fall back to fewer columns. The example below sets 4 columns on desktop and 2 on mobile.

.ProductList-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  .ProductList-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}