Skip to main content

Grid, list, masonry, and pagination

Divi 5 only

Presentation settings are on Archive Loop. Visitor-facing grid/list toggles are covered in Using the list/grid switcher. Open the module reference when you need every nested field.

All of the recipes below start in the Visual Builder: edit Archive Loop, then use Content. After Ajax filtering, the module reapplies the same layout to the new HTML.

Grid and list​

Use List for directory-style rows and article feeds. Use Grid for card walls and product tiles.

Located in: Archive Loop → Content → Grid Settings → Grid Style

Grid Style

  1. Set Grid Style to Grid or List.
  2. For Grid, set Columns (often 3 for blogs, 4 for products).
  3. Optionally enable Custom Gutter Gaps to set horizontal and vertical spacing.
  4. Preview tablet and phone in the builder so column counts still fit.

Leave Grid Style as a single mode when visitors should not change the layout. To let them toggle, see List/grid switcher.

Masonry and equal height​

Masonry packs cards of mixed height without forcing a shared row. Equal Height Posts stretches items in a row so titles and buttons line up.

Pick one:

GoalSetting
Mixed excerpt lengths or images (portfolios, magazines)Grid Style → Masonry
Uniform card rows (product grids, even tiles)Grid Style → Grid, then enable Equal Height Posts

Equal Height Posts has no effect when Grid Style is Masonry. Nested modules in a custom loop layout also affect measured height—test both options with your real card.

Enable masonry​

  1. Archive Loop → Content → Grid Settings.
  2. Set Grid Style to Masonry.
  3. Set Columns and gutters as you would for a grid.
  4. If cards jump after filtering (images still loading), raise Masonry Ajax Delay (milliseconds) until the layout settles.

Enable equal height​

  1. Archive Loop → Content → Grid Settings.
  2. Set Grid Style to Grid (not Masonry).
  3. Enable Equal Height Posts.
  4. If a bottom-aligned button or price appears, use the extra option to pin the last module to the bottom of the card.

Pagination and load more​

Choose how visitors reach the rest of the query. Post Count (Content → Main) is how many items load per page or per batch—default 10.

OptionBest when
PaginationVisitors need numbered pages, “page 2” URLs, or to jump ahead
Load MoreYou want an explicit “show more” button that appends results
Infinite ScrollA continuous feed; the next batch loads at the bottom of the list
NoneA single page of results with no further loading

Located in: Archive Loop → Content → Element Settings → Choose How To Display Load More Posts

  1. Set Post Count to the batch size you want (for example 12).
  2. Under Element Settings, choose Pagination, Load More, Infinite Scroll, or None.
  3. For Pagination, set Pagination Position (Bottom, Top, or both) and optionally Scroll To Top After Pagination (use Scroll To Top Offset for a sticky header).
  4. For Load More, set Load More Text, Load More Loading Text, and Load More Button Alignment. Style the button in the Design tab when those options appear.

Filtered queries keep pagination in sync with active filters. If page two looks wrong after filtering, confirm Archive Loop and Filter Posts share the same post type and query rules. See Pagination or load more loses filters if the next page drops the filter.

Results count​

Show how many posts match the current filter set so visitors know what the loop is displaying.

Located in: Archive Loop → Content → Element Settings → Show Results Count

  1. Enable Show Results Count.
  2. Set Results Count Position (for example Top or Bottom).
  3. Customize copy:
    • Singular — one result (for example “Showing the only result”).
    • All — every result on one view. Use %d for the total (for example “Showing all %d results”).
    • Multiple — a paged range. Use three %d placeholders: start, end, total (for example “Showing %d–%d of %d results”).

Pair the count with reset or selected-filter chips so it is obvious why the number changed. Field-level wording lives on Archive Loop.

List/grid switcher​

When Grid Style is Grid / List View Switch, visitors toggle layout without a reload. Default view, button position, and cookie memory are documented in Using the list/grid switcher—including CSS classes for custom loop layouts.

What's next​