Grid, Masonry, and Pagination
The Archive Loop block controls how results are arranged on the page and how visitors move through multiple pages of filtered content. Layout and pagination are independent from loop templates—templates shape each card; grid settings shape the container.
Grid style
Under Grid settings → Grid style:
| Style | Availability | Description |
|---|---|---|
| Grid | Free | Uniform rows and configurable columns |
| Masonry | Free | Pinterest-style layout following variable card heights |
| List | Pro | Single-column list rows |
| Grid / List view switch | Pro | Visitor-toggle between grid and list; preference can persist via cookie |
List view and the Grid/List view switcher require WPEnhanced Ajax Filter Blocks Pro.
Grid mode
- Set Columns for desktop, tablet, and mobile
- Equal height — Stretch cards in a row to the same height
- Align last module — Bottom-align content in the last row when heights differ
- Custom gutter — Separate row gap and column gap with px units
Grid is the default for blogs and product catalogs with uniform card sizes.
Masonry mode
Masonry fits cards of different heights—common for blog grids with mixed image aspect ratios or Background Image templates.
| Setting | Purpose |
|---|---|
| Masonry Ajax delay | Milliseconds after AJAX before re-calculating layout (default 500; increase if layout breaks on slow hosts) |
Masonry does not support standard numbered pagination. Choose Load More or Infinite scroll (Pro) instead. The pagination option is hidden when masonry is active.
List mode (Pro)
List mode stacks cards vertically—pairs well with Minimal List loop template and shop comparisons where row detail matters.
Configure List position (image left/right) and list-specific excerpt toggles on the loop template.
Grid/List switcher (Pro)
Shows toggle icons so visitors pick grid or list view. Options include:
- Default state — Grid or list on first visit
- List cookie time — Days to remember the visitor’s choice
- Custom grid/list icons and active colours in the Design tab
See List view and grid switch.
Columns and responsive behaviour
| Breakpoint | Setting |
|---|---|
| Desktop | Columns (1–12 depending on theme width) |
| Tablet | Columns tablet |
| Mobile | Columns mobile |
Typical starting points:
- Blog grid: 3 / 2 / 1
- Product catalog: 4 / 2 / 1
- Masonry blog: 3 / 2 / 1 with masonry enabled
Preview in the block editor using responsive preview modes when available.
Pagination modes
Under Elements → Load more / pagination:
| Mode | Availability | Behaviour |
|---|---|---|
| None | Free | Single page; all results beyond post count are unreachable |
| Pagination | Free | Numbered page links; works with grid and list (not masonry) |
| Load More | Pro | Button appends next page below existing results |
| Infinite scroll | Pro | Automatically loads when visitor nears page bottom |
Load More and Infinite scroll require WPEnhanced Ajax Filter Blocks Pro.
Pagination (free)
- Position — Bottom (default); Pro adds top and combined positions
- Custom pagination parameter — Change URL query key for page numbers (SEO or conflict avoidance)
- Style active/inactive page links in Design → Pagination
Pagination preserves URL sync filter parameters when visitors change pages.
Load More (Pro)
- Load more text / Loading text — Button labels
- Scroll to loop after load — Scroll viewport after append
- Scroll offset — Fine-tune scroll destination pixels
Load More keeps prior results visible—good for exploratory browsing.
Infinite scroll (Pro)
Loads silently as the visitor scrolls. Pair with a clear result count so visitors know more content exists. Avoid on footers-heavy pages without a loading indicator.
Result count with pagination
Enable Result count to show ranges like “Showing 1–12 of 48 results”. Updates on filter change and page change. Customize three message formats for single result, all results, and ranges.
Preloader during AJAX
Grid and masonry re-render after each filter AJAX call. Configure Preloader animation and colours in the Design tab so visitors see feedback during queries.
Choosing a layout strategy
| Site type | Suggested setup |
|---|---|
| Blog faceted archive | Grid, 3 columns, pagination |
| Portfolio with varied images | Masonry + Load More (Pro) |
| WooCommerce shop | Grid 4 columns, pagination or Load More |
| Comparison catalog | List view (Pro) or Grid/List switch (Pro) |
Common issues
| Issue | Fix |
|---|---|
| Masonry overlaps after filter | Increase Masonry Ajax delay |
| Pagination missing with masonry | Expected—switch to Load More |
| Load More button does nothing | Confirm Pro license; check console for JS errors |
| Columns collapse on mobile | Set Columns mobile explicitly to 1 |
What's next
- Archive Loop block — All grid and element settings
- Load More and infinite scroll — Pro pagination guide
- Loop templates and layouts — Card design options