How to Create Masonry Image Gallery in Gutenberg (without Plugin)

Looking for a different way to display your eye-catching images? Look no further than Gutenberg’s power! Although plugins have long dominated the gallery scene, it is actually quite simple to create a stunning masonry layout directly within Gutenberg. In this tutorial, we will share techniques for creating captivating masonry image galleries that do not require any third-party plugins.

In addition to providing you with a bonus technique — zooming in on the image’s masonry gallery — get ready to amaze your website visitors with a responsive, aesthetically engaging gallery that perfectly fits with your website’s design.

Steps to Create Masonry Image Gallery in Gutenberg (without Plugin)

Step 1: Add the Gallery Block

Inside the page or post editor, use the “+” icon to add a new block. Afterward, search for and select the Gallery block.

Step 2: Add the Images

Next, add some images that you want to display in your gallery. You can upload new ones or select files from your media library. A little tip. If you create gallery on a regular basis, using a media manager plugin like CatFolders would be a great idea to manage your image assets.

Once you add the images, you can tweak and edit your Gallery block according to your preferences. For this example, we set the column to 4 columns and added the background color.

Step 3: Add the CSS Class

In this step, we will add two CSS classes. The first CSS class will be added to the Gallery block, and the second CSS class will be added to all images that are included in your gallery.

• Add CSS Class to the Gallery Block

On the Gallery block settings, navigate to Advanced -> ADDITIONAL CSS CLASS(ES). Afterward, add the wpp-masonry-image to the ADDITIONAL CSS (ES) input field.

• Add the CSS Class to Images

Next, we’re going to add the CSS class to all images that are included in the gallery.

First, select one of your images in your gallery, then assign the CSS class wpp-masonry-image-item to the available field.

To add the CSS class to the other images, you can copy the style of the image to which you’ve just added the CSS class, select all the images, and then paste it to all images in your gallery.

Step 4: Add the CSS Snippet

Next, you need to add the additional CSS to your WordPress site.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first.

Here is the CSS snippet you can use:

.wpp-masonry-image.columns-default {
   -webkit-columns: 3; /* Chrome, Safari, Opera */
   -moz-columns: 3; /* Firefox */
   columns: 3; /* Standard syntax */
}

.wpp-masonry-image{
   display:block !important;
}

.wpp-masonry-image .wp-block-image{
   width:100% !important;
   margin-bottom:var(--wp--style--unstable-gallery-gap) !important;
}

.wpp-masonry-image.columns-1 {
   -webkit-columns: 1; /* Chrome, Safari, Opera */
   -moz-columns: 1; /* Firefox */
   columns: 1; /* Standard syntax */
}

.wpp-masonry-image.columns-2 {
   -webkit-columns: 2; /* Chrome, Safari, Opera */
   -moz-columns: 2; /* Firefox */
   columns: 2; /* Standard syntax */
}

.wpp-masonry-image.columns-3 {
   -webkit-columns: 3; /* Chrome, Safari, Opera */
   -moz-columns: 3; /* Firefox */
   columns: 3; /* Standard syntax */
}

.wpp-masonry-image.columns-4 {
   -webkit-columns: 4; /* Chrome, Safari, Opera */
   -moz-columns: 4; /* Firefox */
   columns: 4; /* Standard syntax */
}

.wpp-masonry-image.columns-5 {
   -webkit-columns: 5; /* Chrome, Safari, Opera */
   -moz-columns: 5; /* Firefox */
   columns: 5; /* Standard syntax */
}

.wpp-masonry-image.columns-6 {
   -webkit-columns: 6; /* Chrome, Safari, Opera */
   -moz-columns: 6; /* Firefox */
   columns: 6; /* Standard syntax */
}

.wpp-masonry-image.columns-7 {
   -webkit-columns: 7; /* Chrome, Safari, Opera */
   -moz-columns: 7; /* Firefox */
   columns: 7; /* Standard syntax */
}

.wpp-masonry-image.columns-8 {
   -webkit-columns: 8; /* Chrome, Safari, Opera */
   -moz-columns: 8; /* Firefox */
   columns: 8; /* Standard syntax */
}


.wpp-masonry-image-item img {
   transition: transform 0.4s ease-in-out;
 }
 
 .wpp-masonry-image-item:hover img {
   transform: scale(1.2);
 }
 
 .wpp-masonry-image-item {
   overflow: hidden;
 }

Explanation of the CSS code:

1. Setting Up Column Layout:

.wpp-masonry-image.columns-default:

Sets the element (Gallery block) to have three columns using vendor prefixes for different browsers and the standard columns property.

.wpp-masonry-image:

Ensures the Gallery block displays as a block element, overriding any inline styles.

2. Styling Individual Images within the Gallery:

.wpp-masonry-image .wp-block-image:

Sets the images in the gallery width to 100% of their container, filling the column. Sets the bottom margin using a custom variable (--wp--style--unstable-gallery-gap).

3. Defining Different Column Layouts:

.wpp-masonry-image.columns-1 to .wpp-masonry-image.columns-8:

Each class sets the number of columns for different layouts using vendor prefixes and the standard columns property.

4. Image Hover Effect:

.wpp-masonry-image-item img:

Adds a smooth transition effect (“transform“) when hovering over the image.

.wpp-masonry-image-item:hover img:

Defines the hover behavior, scaling the image by 120% on hover.

.wpp-masonry-image-item:

Sets the images in the gallery to have a hidden overflow that will prevent image content from spilling outside its container.

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

That’s it. To see the result, you can preview your masonry image gallery page by clicking the Preview button. Don’t forget to save or publish your page if you want to.

The Bottom Line

This article guides you through the process of building a visually appealing masonry image gallery directly within Gutenberg, eliminating the need for plugins. By following these steps:

• Add the Gallery Block: Choose the Gallery block and select your desired images.
• Add CSS classes: Assign two CSS classes: one to the Gallery block and another to each image.
• Add CSS Snippet: Copy and paste the provided CSS code into your WordPress Customizer.

The CSS code defines the layout, image size, and a cool hover effect that zooms in on images. It also allows for various column configurations.