No results found. Try again with different words?

Search must be at least 3 characters.

BACK TO DOC

Masonry Image Gallery

Spectra 1.24.0 added a Masonry layout option to the Gutenberg Gallery block. This document will show you how to use this option to create your masonry image gallery.

How Does Masonry Layout Works?

Creating a great-looking gallery can sometimes be a demanding task, especially when combining images of different sizes and orientations.

Masonry Layout

Usually, you would need to edit your images properly before uploading. This way, your gallery would look neath, and you would avoid essential parts of some images getting cropped. 

However, there is a way to make things much simpler. The masonry gallery layout sets the same width for all images while maintaining different heights. Thus, you will get all the different images perfectly combined into a beautiful and exciting gallery with the masonry layout. 

Masonry Layout

How Can I Create Masonry Image Gallery?

You can add your masonry gallery to any page or post. Follow these steps to create your masonry gallery:

Step 1 – Open the page or post Block editor, and add a Gallery block;

Step 2 – Add images to your gallery by clicking the “Upload” or “Media Library” buttons. This will depend on where your images are located;

Step 3 – In the block settings on the right side, scroll to “Gallery Settings”. Here, you can select the number of columns for your gallery;

Step 4 – Further, scroll down to “Masonry Gallery” and click on “Enable Masonry Layout”. This will switch your standard gallery layout to a masonry layout;

Enable Masonry Layout

Step 5 – Also, you can set the “Gap” size. This will set the size of the space between your gallery images;

Step 6 (Optional) – Finally, in case the width of some images is too small, you might notice empty spaces. Now, you can set images to cover the whole area perfectly by enabling the “Crop Images” option. Find this option in the “Gallery Settings”.

Gallery Settings”

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Get access to growing library of 40+ innovative widgets and 300+ creative templates.

Ultimate Addons for Gutenberg Is Now Spectra - 

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Scroll to Top