Product Grid with Spaces

What You'll Create

A product grid layout with intentional empty spaces creating an asymmetric, editorial-style arrangement. Products appear in an offset pattern rather than a standard uniform grid.

The Problem It Solves

Squarespace's default product grid displays items in uniform rows. When you want a more editorial, gallery-like presentation with intentional whitespace and offset positioning, you need CSS Grid with subgrid techniques.

Perfect For

Boutique shops, Art galleries, Fashion stores, Curated collections, Premium brands

What Makes This Different

This technique uses CSS Grid subgrid to create a repeating pattern where every 6th product spans extra columns with content offset. Creates visual rhythm and breathing room without hiding products.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Product grid section

• Toolkit Title: Product Grid with Spaces

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support