Masonry Layout for Gallery Blocks
Shows images in any Gallery block with the class "wpide-masonry" in a Pinterest-style masonry layout, keeping each photo's natural shape instead of cropping it.
Opens WPIDE on
Code
.wp-block-gallery.wpide-masonry {
display: block !important;
columns: 3 220px;
column-gap: var(--wp--style--gallery-gap-default, 16px);
}
.wp-block-gallery.wpide-masonry > .wp-block-image {
width: 100% !important;
margin: 0 0 var(--wp--style--gallery-gap-default, 16px) !important;
break-inside: avoid;
}
.wp-block-gallery.wpide-masonry > .wp-block-image img {
width: 100%;
height: auto !important;
object-fit: initial !important;
}Notes
Add wpide-masonry to the Gallery block's Additional CSS class(es) and turn off "Crop images". Column count follows the available width.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.