Free Tool

Masonry Gallery Generator

Override Squarespace’s default gallery grid with a true masonry layout using CSS columns. Customize columns, gaps, hover effects, and responsive breakpoints.

Why this matters

Squarespace’s built-in gallery grid forces all images into equal-height rows, cropping tall images and wasting space around short ones. A masonry layout preserves each image’s natural aspect ratio, creating a Pinterest-style grid that showcases photography and artwork properly.

Customize

3
16px
4px

Hover Effect

Responsive Breakpoints

Live Preview

Hover over blocks to preview the zoom effect.

Generated Code

/* ── Masonry Gallery Override ──
   Paste into Design > Custom CSS
   Targets Squarespace gallery grid blocks */

/* Base masonry layout using CSS columns */
.sqs-gallery-design-grid-slide {
  display: block !important;
}
.sqs-gallery-design-grid .sqs-gallery-design-grid-slide {
  width: 100% !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}
.sqs-gallery-design-grid .slides-wrapper {
  display: block !important;
  column-count: 3;
  column-gap: 16px;
  height: auto !important;
}
.sqs-gallery-design-grid .slide {
  break-inside: avoid;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 4px;
}
.sqs-gallery-design-grid .slide .margin-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.sqs-gallery-design-grid .slide .margin-wrapper img {
  width: 100%;
  height: auto !important;
  display: block;
  object-fit: cover;
}

/* Hover: zoom */
.sqs-gallery-design-grid .slide .margin-wrapper img {
  transition: transform 0.4s ease;
}
.sqs-gallery-design-grid .slide .margin-wrapper:hover img {
  transform: scale(1.05);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .sqs-gallery-design-grid .slides-wrapper {
    column-count: 2;
  }
}
@media (max-width: 640px) {
  .sqs-gallery-design-grid .slides-wrapper {
    column-count: 1;
  }
}

How to add this to Squarespace

  1. Go to Design → Custom CSS
  2. Paste the generated CSS code.
  3. Add a Gallery Section or Gallery Blockset to “Grid” layout on any page.
  4. The CSS overrides the default grid with a masonry layout. Images keep their natural aspect ratios.
  5. If targeting a specific gallery, add a section ID and prefix each selector with #your-section-id to scope the styles.

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →