Masonry Galleries & Gutenberg

The new WordPress editor, codenamed Gutenberg, comes with a new gallery block that lets you easily pick the number of columns, and quickly put together a nice image collage.

If we utilize the ability to also add a custom CSS class, we can rearrange this gallery relatively easily, using just a little bit of additional CSS.

Start by opening the Block Settings panel, and adding custom-gallery in the Additional CSS Class field:

We can now write a snippet of custom CSS to hook into that and tune the design. Here's a bit of CSS that'll turn it into a masonry layout. 

.custom-gallery {
     column-count: 2;
     column-gap: 0;
     padding: 0;
     display: block;
}

@media (min-width: 782px) {
    .custom-gallery {
         column-count: 3;
    }
}

@media (min-width: 1440px) {
    .custom-gallery {
         column-count: 4;
    }
}

.custom-gallery .blocks-gallery-item {
     display: block;
     width: auto;
     margin: 0;
}

.custom-gallery .blocks-gallery-item figure {
     height: auto;
}
 

If you'd like an example of what this looks like, head to my Projects page.

No doubt someone will soon enough create a dedicated block just for masonry-style galleries. In the meantime, this trick might hold you over.