Jump to content

Masonry Grid Ignore Caption Spacing

Recommended Posts

Site URL: https://www.dreamdescriptions.com/

Hello! I am trying to make my masonry grid ignore captions for spacing the images so that the space between images remain the same regardless of there being a caption to the image or not.

The two pictures I have attached show the current irregular spacing that comes when I caption an image and the second picture shows the regular spacing that I hope to achieve. I also want to move the text closer to the image that it is a caption for.


I hope someone can help!



password: temp6789



Link to comment
  • Replies 2
  • Views 834
  • Created
  • Last Reply

Adding this:


figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(255,255,255,1);
    content: "Dream Descriptions";
    display: block;
    position: absolute;
    top: 100.25%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 1;
      font-size: 0.9rem;

Gave me what I wanted but now I need to figure out how to make the captions individual. Any clues?


image captions.png

Link to comment
  • 3 weeks later...




.gallery-caption {
    position: absolute !important;
    top: 104%;
    left: 0%;
    transform: translate(0%, -6%);
    width: 100%;
    opacity: 0;
    transition: all .0s ease;
    background-color: none;
    height: 100%;
      opacity: 1;

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .0s ease;

.gallery-caption-wrapper {
    display: flex;
    place-items: left;
    justify-content: left;

.gallery-caption {
    pointer-events: none;

The above code seems to be working as I intended and it also supports clickthrough. Viewing the site in the preview makes it seem like there is still non-uniform spacing horizontally and vertically in the beginning. But when I refreshed the actual website it is clear that the uneven spacing is gone. Then after some more refreshing it was also gone in the website editor.

I have captions turned on in this example, which is where I input the text.


Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.