Divi 5 Masonry Gallery

A Divi Masonry gallery is the layout where images stack in columns but keep their natural heights — no cropping, no forced aspect ratio, no wasted whitespace. You have seen it on Pinterest, on photography blogs, on editorial sites where the images are too varied in proportion to force into a uniform grid without losing what makes each shot interesting.

Divi 5's default Gallery module cannot do Masonry. It has one layout option — Grid — and Grid crops every image to the same cell size. If you want Masonry in Divi 5, you need a module that ships its own layout engine.

This guide shows you exactly how to build a Divi 5 Masonry gallery using HappyDivi Gallery, which includes a purpose-built JavaScript Masonry engine alongside Grid and Justified layouts. It works with five different content sources — Media Library, Posts, Custom Post Types, ACF fields, and WooCommerce Products — without any code, shortcodes, or separate Masonry plugin.

By the end of this guide you will have a working Masonry gallery in Divi 5. You will also understand the settings well enough to adapt it for any content source and any design context.

What Is a Divi Masonry Gallery Layout and Why Does It Matter?

Before getting into settings, it is worth understanding what the Masonry algorithm actually does, because this affects several decisions you will make later.

In a standard Grid layout, the browser divides available width into equal columns and forces every image into an identical cell. Images that are taller than the target height get cropped at the top and bottom. Images that are shorter get letterboxed or cropped too. The result is visually uniform but loses information — a tall portrait shot and a wide landscape shot look identical in size.

In a Divi Masonry layout, images are also placed in columns, but they keep their natural height. The layout engine places each new image into whichever column is currently the shortest. The result is a staggered, organic arrangement where the left edge of every image aligns with the column, but the right-hand edge of the entire gallery is always ragged taller images extend further down, shorter images end sooner.

This matters for three practical reasons:

1. No cropping. The full image is shown. A tall portrait is tall; a wide landscape is wide. This is essential for photography, art, and any gallery where composition extends to the edges of the frame.

2. Natural visual rhythm. The staggered bottom edge of a Masonry gallery reads as organic and editorial rather than mechanical. It signals "curated collection" rather than "product catalog."

3. Mixed-orientation sets work. If your image library has a mix of portrait, landscape, square, and panoramic shots — which is almost always the case for real photography — Masonry handles all of them gracefully in the same gallery without any manual sorting or grouping.

The trade-off: Divi Masonry requires JavaScript to calculate column positions, because CSS alone cannot implement a true Masonry algorithm (CSS Masonry was proposed as a native feature, but browser support as of 2026 is still limited to experimental flags). This is why it matters that the Masonry engine in HappyDivi Gallery is code-split — it is only downloaded on pages that actually use it, and it is written in vanilla ES2020 with no jQuery dependency.

Before You Start: Install HappyDivi Gallery

HappyDivi Gallery is a premium plugin available from happydivi.com/gallery. Purchase and download the plugin ZIP file. Install it via WordPress Admin → Plugins → Add New Plugin → Upload Plugin, select the ZIP, and activate. The HappyDivi Gallery module registers itself with Divi 5 automatically on activation — no additional setup, no API key, no configuration file.

Once activated, open any page in the Divi 5 Visual Builder, click the blue + button to add a module, and search for "HappyDivi". The HappyDivi Gallery module appears in the results.

For a complete walkthrough of every feature this module offers — not just Masonry — see The Complete Divi 5 Gallery Guide: Dynamic Sources, Layouts, Lightbox, Filters & Pagination (2026).

Step 1: Add the HappyDivi Gallery Module and Choose Your Content Source

Insert the HappyDivi Gallery module into your page. The first decision is where the gallery gets its images. This choice is made under Content tab → Image / Content Source → Source.

The Masonry layout engine works identically with every content source, so pick the one that matches your actual content, not the one you think will work better with Masonry specifically.

Media Library — For Hand-Picked Image Sets

Choose Media Library if you want to manually select exactly which images appear and in what order. After selecting this source, a media picker opens where you can select images one by one or in bulk. Drag the thumbnails to reorder. Any reordering you do here is preserved exactly in the Masonry layout.

Typical uses: Photography portfolio with a curated selection, client gallery, campaign image set, before-and-after series.

Pro tip: For a Masonry gallery sourced from the Media Library, include a deliberate mix of portrait, landscape, and square images. A gallery of all landscape images loses one of Masonry's biggest advantages — the visual rhythm only emerges when heights vary.

Posts — For a Blog Post Grid That Updates Automatically

Choose Posts if you want the gallery to pull the Featured Image from your blog posts automatically. Set the number of items, filter by category or tag, and the gallery refreshes every time you publish a new post — no manual update needed.

Typical uses: Blog landing page, category archive, news feed, magazine-style post grid.

For a full step-by-step tutorial on the Posts source including how to display post titles and link through to articles, see How to Create a Dynamic Gallery from WordPress Post Attachments in Divi 5.

Custom Post Type, For Portfolio Items, Projects, and Listings

Choose Custom Post Type if your images are managed as Featured Images on a custom post type — portfolio projects, team members, properties, events, menu items, or any CPT registered on your site. Select the post type from a dropdown.

Typical uses: Agency portfolio, architect project gallery, property listings preview grid, team page.

See How to Build a Custom Post Type Portfolio Gallery in Divi 5 for a complete tutorial that adds a filterable category bar and bookmarkable URLs on top of the Masonry layout.

WooCommerce Products For a Masonry Product Gallery

Choose WooCommerce Products if you want product featured images displayed in a Masonry layout. This source activates the full WooCommerce feature set — price display, sale badges, Add to Cart buttons, per-cell product carousels, color swatches, and live frontend controls (sort dropdown, price range slider).

Typical uses: Handmade goods shop, art print store, fashion boutique where products are very varied in image proportion.

ACF Image / Gallery Field For Images Stored in Custom Fields

Choose ACF Image / Gallery Field if your images are attached to posts via an Advanced Custom Fields image or gallery field. Select the post type and field name from dropdowns. No PHP required.

Typical uses: Real estate property photos stored in a gallery field, team headshots stored in an image field, case study screenshots stored in a gallery field.

Common Source Settings to Configure Now

Whichever source you chose, configure these shared options before moving to the layout step:

• Number of Items — how many images to fetch. For Masonry galleries with pagination, 12–24 is a good starting point per page.
• Included Categories / Tags — leave blank to include everything, or multi-select specific taxonomy terms to restrict the gallery.
• Order By — for blog post grids, use Publish Date descending (newest first). For curated portfolios, use Menu Order so you control the sequence from the WordPress backend.
• Order Direction — Descending for newest-first; Ascending for oldest-first or menu-order ascending.

Step 2: Set the Layout to Masonry

Navigate to Content tab → Gallery Layout.

1. Set Layout Style to Masonry.

That is the one required setting. The moment you switch to Masonry, the layout engine activates, and the Visual Builder preview updates to show the staggered column arrangement.

Now configure the Masonry-specific layout controls:

Columns

Set the number of columns for each breakpoint independently:

• Desktop: 3 columns is the standard starting point for most gallery widths. 4 columns works well for very wide containers (full-width sections). 2 columns works for narrow sidebars or contained layouts.
• Tablet: 2 columns. Three columns on a typical tablet viewport makes images too small to appreciate.
• Phone: 1 column. Two columns on phone is possible for small images but often makes portrait shots feel cramped.

To switch between breakpoints in the Visual Builder, use the responsive preview icons at the bottom of the settings panel. Each column value is saved independently.

Gap

The gap is the spacing between images, applied both horizontally (between columns) and vertically (between images within a column). Common values:

• 8 px — tight, editorial, images feel part of a continuous mosaic.
• 12–16 px — the standard for most photography and portfolio galleries.
• 24 px — generous spacing; images breathe; better for galleries where each image is meant to be studied individually.

Gap is also responsive — set a smaller gap on phone to maximise image size on narrow viewports.

Image Size

Under Gallery Layout → Image Size, choose which WordPress image size to serve to the browser:

• Thumbnail (150 px) — only appropriate for decorative galleries or icon-sized images.
• Medium (300 px) — acceptable for small gallery cells but will look soft on retina screens.
• Large (1024 px) — recommended for most Masonry galleries. Crisp on retina, fast enough for lazy-loaded galleries.
• Full Size — use only if images need to be zoomed or downloaded at maximum quality; increases page weight significantly.

Note on Masonry and aspect ratio: The Aspect Ratio setting only applies to Grid layout. In Masonry, the aspect ratio control disappears because Masonry always shows images at their natural proportions — that is the defining characteristic of the layout. Similarly, the Image Display Mode (Fill & Crop, Blur Background) is Grid-only. In Masonry, images are never cropped.

Step 3: Configure Captions

Captions in a Masonry gallery are positioned either over the image as an overlay, or below the image as a separate block underneath the image cell.

Navigate to Content tab → Caption.

Below Image (Recommended for Masonry)

For Masonry, Below Image usually works better than overlay. Here is why: in a Masonry layout, image heights vary, so an overlay caption at the bottom of a tall portrait looks different from one at the bottom of a short landscape. Below-image captions sit in a consistent relationship to the image bottom edge regardless of image height.

Set Content Position to Below Image. Then choose what to display:

• Title — the image title (or post title / product name, depending on source).
• Caption — the image caption text from the Media Library. Only available for the Media Library source.

Overlay (For Hover Effects)

If you prefer an overlay caption, set Content Visibility to Show on Hover. The caption fades in when the visitor moves their cursor over an image. This keeps the Masonry layout visually clean at rest while still delivering information on interaction.

Combine with Item Overlay (Design tab → Overlay) set to hover-only with a dark gradient — the gradient appears on hover and the caption text sits on top of it, ensuring legibility regardless of image brightness.

Step 4: Set the Click Action

Navigate to Content tab → Click Action.

For a Masonry gallery, you have three options:

Open in Lightbox

The best choice for photography portfolios and any gallery where the goal is to view images at full quality. When a visitor clicks a Masonry image, the lightbox opens with the full-resolution version. Navigation arrows, keyboard shortcuts, thumbnail filmstrip, zoom, and other toolbar buttons are all available.

For Masonry specifically, the lightbox is particularly valuable because the Masonry layout often shows images at a reduced size — especially tall portrait shots that are narrower in a three-column layout. The lightbox lets visitors see the full image at viewport scale.

Enable: Thumbnails (filmstrip), Zoom, Fullscreen as a strong starting point. Add Info Panel for photography (shows EXIF data), Download for client galleries, Share for public portfolios.

For a complete breakdown of every lightbox setting and fixes for common lightbox problems in Divi 5, see Divi Lightbox Not Working in Divi 5? Every Fix + How to Set It Up Correctly.

Go to Post / Product URL

The right choice when each gallery item represents a piece of content the visitor should navigate to — a blog post, a portfolio project page, a WooCommerce product detail page, a property listing.

Set Click Action to Go to Post / Product URL, then choose whether to open in the same tab (better for internal navigation) or a new tab (better for external links or products).

No Click Action

Use this only for purely decorative galleries — background textures, mood board images, ambient visuals — where clicking should do nothing.

Step 5: Add a Category Filter Bar (Optional but Recommended)

A filter bar above or below the gallery lets visitors narrow the displayed images by category without a page reload. For a Masonry gallery, the filter transition is particularly satisfying: images being filtered out fade away, the Masonry engine recalculates column positions for the remaining images with a smooth animation, and newly revealed images stagger back in column by column.

Enable under Content tab → Filter Bar → Enable Filter.

Choose a Filter Style

• Pills — rounded buttons; versatile and modern; works well in most designs.
• Tabs — flat tab strip; stronger for editorial or publication-style pages.
• Buttons — standard rectangular buttons; clean and neutral.
• Dropdown — compact select element; best when gallery width is limited or on mobile.

Enable Deep Linking for Shareable Filtered Views

Turn on Deep Link under the Filter Bar group. When a visitor selects a filter, the URL updates to ?hdgcat=your-category-slug via history.pushState. The page does not reload. But the URL is now bookmarkable and shareable — a potential client can send someone directly to yoursite.com/portfolio/?hdgcat=branding and they land with that filter already active.

This is one of the features that separates HappyDivi Gallery from most gallery plugins and even from the default Divi gallery. See How to Build a Custom Post Type Portfolio Gallery in Divi 5 for a full filter bar walkthrough that uses deep linking on a real portfolio build.

Enable Sticky Filter Bar

If your gallery is long enough that visitors need to scroll to browse it, enable Sticky under the Filter Bar group. The filter bar pins to the top of the viewport with position: sticky — it stays visible while the visitor scrolls through the gallery below. The sticky bar background color is configurable separately in Design tab → Filter Bar Settings so it can match your site's header or be styled distinctly.

Step 6: Add Pagination

For any gallery with more than 20–24 items, pagination keeps the initial page load fast and prevents the gallery from becoming an overwhelming wall of images.

Navigate to Content tab → Pagination → Enable Pagination.

For a Masonry gallery, there are three modes and each has a different effect on the layout experience:

Infinite Scroll — Best for Masonry

Infinite Scroll is the natural companion to Masonry. As the visitor scrolls to the bottom of the current gallery items, the next batch loads and the Masonry engine adds the new images to the shortest columns — the layout simply grows downward, seamlessly.

Enable: Mode → Infinite Scroll. Set Items Per Page to 12. The IntersectionObserver sentinel fires when the visitor is near the bottom of the loaded items, fetching the next batch before they actually reach the end.

Per-page tip: 12 items per page is a good default. At 3 columns, that is 4 rows of items minimum (though Masonry distributes them irregularly). Loading 12 at a time keeps each batch fast while extending the gallery smoothly.

Load More — Best for Controlled Browsing

If you prefer the visitor to actively choose to see more images — for example, in a portfolio where you want them to study each piece before continuing — use Load More. A button appears at the bottom of the current items. On click, the next batch is added to the Masonry layout with staggered entrance animations.

Customise the button label: "Load More Work", "See More Photos", "Show More Listings" — anything that fits your context. Configure under Pagination → Load More Label.

Numbered Pages — Best for Large Catalogs

For very large galleries (100+ items) where visitors may want to jump to a specific page, use Numbered Pages. The page number bar includes smart truncation — 1 2 … 14 15 16 … 99 100 — so it never overflows even for galleries with dozens of pages.

For a detailed comparison of all three pagination modes including performance data, see Divi Gallery Pagination in Divi 5: AJAX, Load More & Infinite Scroll Explained.

Step 7: Configure Lazy Loading

Navigate to Content tab → Lazy Loading.

For a Masonry gallery, lazy loading is almost always the right call. A Masonry gallery with 24 items can contain images totalling several megabytes — loading all of them immediately would make the page feel slow, especially on mobile.

HappyDivi Gallery's lazy loading uses an IntersectionObserver with a 200 px preload margin — images start loading when they are 200 px below the bottom of the viewport, so they appear already loaded as the visitor scrolls to them. There is no visible delay.

Choose a Placeholder Mode

• Blur-up (default) — a blurred low-resolution placeholder fades to sharp as the real image loads. The most photographic, polished feel. Strongly recommended for photography and editorial galleries.
• Skeleton shimmer — a pulsing grey shape fills the cell. App-like and modern. Works well for product galleries and post grids.
• None — no placeholder; images simply appear when loaded. Use only if the placeholder animation feels out of character with your design.

When to Turn Lazy Loading Off

If the Masonry gallery is the first content above the fold on the page — a hero gallery, for example — turn lazy loading off entirely for the above-the-fold images. Lazy loading delays the browser from downloading images until the observer fires, which pushes your Largest Contentful Paint (LCP) score higher. With lazy loading off, images load immediately and your LCP is as fast as possible.

For a gallery below the fold (below a header, below other content), always leave lazy loading on.

Step 8: Style the Gallery (Design Tab)

The Content tab defines what the gallery does. The Design tab defines how it looks. Here are the most impactful Design tab settings for a Masonry gallery:

Image Border and Rounding

Design tab → Image Style → Border. Add rounded corners to every image cell — 4–8 px radius gives a subtle modern softness without looking circular. Set border width and color to add a thin frame around each image.

All border settings are responsive (different values per breakpoint) and support hover states — for example, a border color that appears only on hover.

CSS Filters for Hover Effects

Design tab → Image Style → CSS Filters. Apply visual filters to images: hue rotation, saturation, brightness, contrast, blur, opacity, invert. The key feature is the hover state — you can set a different filter state for hover, and Divi handles the CSS transition automatically.

A very popular effect for Masonry galleries: set Saturate to 0 (greyscale) as the default state and Saturate to 100% on hover. The gallery displays in greyscale at rest; each image springs to full color when the visitor hovers. This creates a strong visual effect while keeping the gallery visually calm when no image is being focused on.

Item Overlay

Design tab → Overlay. An optional translucent layer over each image. Set Hover-Only to show it only on mouse-over. Use a dark gradient overlay (semi-transparent at top, more opaque at bottom) to create a surface for overlay captions without permanently obscuring images. The overlay background accepts solid color, gradient, image, or video.

Item Spacing and Box Shadow

Design tab → Item Settings. Add spacing (margin/padding) around each item cell and add a box shadow for depth. A subtle 0 4px 16px rgba(0,0,0,0.12) box shadow lifts each image card slightly off the page — effective in light-background galleries.

The Complete Masonry Gallery Recipe: Pinterest-Style Blog Feed

Here is Recipe 4.1 from the HappyDivi Gallery design library in full — a step-by-step build of a Pinterest-style blog post grid with Masonry layout and Infinite Scroll.

Goal: An auto-updating blog gallery that pulls post featured images, displays post titles below each image, loads new posts automatically as the visitor scrolls, and links each image through to the full post.

All Settings at a Glance

Content tab → Image / Content Source

• Source: Posts
• Number of Items: 24
• Order By: Publish Date
• Order Direction: Descending

Content tab → Gallery Layout

• Layout Style: Masonry
• Columns: 3 (desktop) / 2 (tablet) / 1 (phone)
• Gap: 16 px

Content tab → Caption

• Show Title: on
• Content Position: Below Image
• Visibility: Always Visible

Content tab → Click Action

• Action: Go to Post URL
• Open in: Same Tab

Content tab → Pagination

• Enable: on
• Mode: Infinite Scroll
• Items Per Page: 12

Content tab → Lazy Loading

• Enable Lazy: on
• Placeholder: Blur-up

What This Produces

A three-column Masonry grid of post featured images. Post titles appear below each image. New posts load automatically as the visitor scrolls toward the bottom. Clicking any image navigates to the full post. The gallery updates automatically every time a new post is published — no manual maintenance required.

Masonry With Every Content Source: Quick Recipes

The full recipe above uses Posts as the source. Here is how to adapt the core Masonry layout to each of the other four sources:

Media Library — Photography Portfolio

• Source: Media Library → select photos
• Layout: Masonry, 3 cols, 12 px gap
• Click Action: Open in Lightbox (Thumbnails + Zoom + Fullscreen on)
• Lazy Loading: Blur-up
• Pagination: Load More, 12 per page

Best for: Solo photographer portfolio, travel photography set, event photo gallery.

For the full photography build including Justified layout comparison and EXIF lightbox setup, see Photography & Real Estate Gallery in Divi 5: Full Build With Post Attachments, Masonry & Lightbox.

Custom Post Type — Agency Portfolio

• Source: Custom Post Type → select your portfolio CPT
• Layout: Masonry, 3 cols, 16 px gap
• Filter Bar: Pills style, Deep Link on, Sticky on
• Click Action: Go to Post URL
• Lazy Loading: Skeleton shimmer
• Pagination: Load More, "See More Work"

Best for: Agency project grid, architect portfolio, creative studio case studies.

Full build tutorial: How to Build a Custom Post Type Portfolio Gallery in Divi 5.

WooCommerce Products — Handmade / Art Shop

• Source: WooCommerce Products → stock In Stock
• Layout: Masonry, 3 cols, 12 px gap
• Caption: Price + Sale Badge + Cart Icon on hover
• Product Carousel: on (shows all product images per cell)
• Filter Bar: Pills, Sticky on
• Pagination: Load More, 12 per page

Best for: Etsy-style handmade goods store, art print shop, fashion boutique with varied product photography.

ACF Gallery Field — Case Studies or Team Pages

• Source: ACF Image / Gallery Field → post type: your CPT, field name: your field
• Layout: Masonry, 3 cols, 8 px gap (tight, editorial)
• Click Action: Open in Lightbox (no Download, no Share for private content)
• Lazy Loading: Blur-up
• Pagination: Numbered Pages if the set is large

Best for: Case study image gallery, team headshots, architecture project photos stored in ACF fields.

Common Masonry Gallery Mistakes (and How to Avoid Them)

All Images Are the Same Height — Masonry Looks Like a Grid

Cause: All source images happen to be the same aspect ratio (all landscape, all square), so the Masonry engine places them in equal-height columns that look identical to a grid.

Fix: This is a content problem, not a settings problem. Either source images with genuinely varied proportions (portrait + landscape mixed), or switch to Grid layout with a chosen aspect ratio — Grid is actually the better choice when all your images are the same proportion.

The Gallery Re-Flows Incorrectly After Filtering

Cause: The Masonry layout engine runs on JavaScript. If another script on the page (usually a slider, accordion, or tab plugin) hides and then shows the gallery container, the layout engine may have calculated column positions for a container with width: 0 during the hidden state, and the re-layout is wrong.

Fix: Ensure the gallery container is visible in the DOM before the Masonry engine runs. If the gallery is inside a Divi Tab or Accordion module, trigger a layout recalculation when the tab becomes visible. This is a known edge case for all JavaScript Masonry libraries, not specific to HappyDivi Gallery.

Images Load in the Wrong Column Order

Cause: With lazy loading enabled, images load at different speeds depending on file size, server response time, and network conditions. If the Masonry engine places images before they are all loaded, images of unknown height are treated as zero-height, resulting in incorrect column assignment.

Fix: HappyDivi Gallery handles this by reading image dimensions from the width and height attributes on the element — which PHP renders from the WordPress attachment metadata — before the image itself loads. The layout is calculated from known dimensions, not from rendered heights. If you are seeing layout issues, check that your images have proper width/height metadata in the WordPress Media Library (re-upload or regenerate thumbnails with the "Regenerate Thumbnails" plugin if needed).

The Masonry Layout Breaks on Mobile

Cause: Column count is set the same for all breakpoints — for example, 3 columns on phone — making images too small to see.

Fix: Use the responsive breakpoint controls. Set 3 columns for desktop, 2 for tablet, 1 for phone. Switch breakpoints in the Visual Builder using the responsive preview icons at the bottom of the settings panel.

Masonry vs Grid vs Justified: When to Use Each

What the Default Divi 5 Gallery Cannot Do (Masonry Edition)

The native Divi 5 Gallery module has no Masonry layout option at all. It ships with Grid only. If you need Masonry in Divi 5, your options are:

1. Use a CSS-only "fake Masonry" technique with column-count — this produces a layout where images flow top-to-bottom within columns (like a newspaper column) rather than left-to-right in rows, which means the reading order is wrong and filters cannot work correctly.
2. Use a third-party Masonry library like Isotope or Masonry.js and wire it up manually — requires developer work and adds a jQuery dependency.
3. Use HappyDivi Gallery — purpose-built Masonry engine, native Divi 5 module, no jQuery, code-split, works with all five content sources, integrates with the filter bar and pagination.

For the full comparison of HappyDivi Gallery versus the default Divi 5 gallery across all ten feature categories, see 10 Things Divi's Default Gallery Module Cannot Do (And the Exact Fix for Each).

Frequently Asked Questions

Does Divi 5 support Masonry layout natively?

No. The Divi 5 Gallery module ships with Grid layout only. Masonry is not available in the native module. To get Masonry in Divi 5, you need a gallery module that ships its own layout engine — such as HappyDivi Gallery, which includes Grid, Masonry, and Justified as switchable options within a single module.

Does a Masonry layout hurt page speed or Core Web Vitals?

It can, if the Masonry engine is a jQuery-based library loaded on every page. HappyDivi Gallery's Masonry engine is code-split — it is only downloaded on pages that actually use Masonry — and it is written in vanilla ES2020, adding no jQuery overhead. With lazy loading enabled, images load on demand. With server-side rendering, the gallery HTML (including image dimensions) is available before JavaScript loads, so the layout is calculated correctly from the first paint.

Can I use a Masonry gallery with a category filter in Divi 5?

Yes. HappyDivi Gallery's category filter bar integrates directly with the Masonry layout engine. When a visitor clicks a filter, the items being hidden fade out, the Masonry engine recalculates column positions for the remaining items with a smooth animated transition, and newly revealed items stagger in column by column. This three-phase animation works reliably with all three layout engines.

Can I have different column counts on desktop, tablet, and phone?

Yes. Every layout-critical setting in HappyDivi Gallery — columns, gap, justified row height — has per-breakpoint controls directly in the Visual Builder. Switch between breakpoints using the responsive preview icons at the bottom of the settings panel and set a different column count for each.

Does Masonry work with Infinite Scroll and the filter bar at the same time?

Yes. All three features — Masonry layout, Infinite Scroll pagination, and the category filter bar — work simultaneously. When a visitor applies a filter, pagination resets to page 1 and only items matching the filter are shown. Scrolling loads the next batch from the filtered set. The Masonry engine recalculates after every filter change and after every new batch is revealed.

What happens to the Masonry layout when new items are added by pagination?

New items are handed directly to the Masonry engine, which places each new image into the shortest column at the time of insertion. The new items get their own staggered entrance animation. The layout does not reset or re-flow existing items — new images are simply appended below the existing ones, extending the gallery downward.

Get HappyDivi Gallery → Lifetime + yearly unlimited-site licences from happydivi.com/gallery. One module replaces 3–4 separate gallery plugins.

HappyDivi Gallery is developed by the HappyDivi team and is available exclusively for Divi 5. For the full feature reference, visit happydivi.com/gallery.