# 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.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: gallery, masonry, images, layout
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-masonry-gallery/

## Code

```css
.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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Masonry Layout for Gallery Blocks" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/