Grids & Layouts

A Grid is the visual container that displays your filtered results (like a product catalog or blog feed). FilterX Grids are completely decoupled from your facets — meaning you can place a grid anywhere on your page and connect it to any filter sidebar instantly.

Layout Styles & Use Cases

▦

Standard Grid

The classic responsive CSS grid. You define how many columns to show on Desktop, Tablet, and Mobile.

🛍️ E-Commerce Stores: Perfect for product catalogs where every image is roughly the same shape and size.

⬚

Masonry (Waterfall)

A Pinterest-style layout that seamlessly interlocking cards of different heights.

🎨 Portfolios & Galleries: Best for creative agencies, photography sites, or blogs where featured images vary in height.

≡

List View

A single-column layout where each card takes up the full width of the container.

📰 News & Articles: Ideal for displaying blog posts with long excerpts or detailed real-estate property descriptions.

↔

Carousel

A horizontal sliding track of cards with navigation arrows.

⭐ Featured Sections: Great for a 'Top Rated Products' or 'Meet the Team' section on your homepage, where you want to save vertical space.

⊞

Data Table

A strict tabular layout that aligns data into rows and columns.

📊 B2B & Wholesale: Excellent for wholesale order forms, software feature comparisons, or dense data directories.

Pagination Strategies

Load More Button

Instead of reloading the page, a button at the bottom fetches the next batch of items and appends them seamlessly underneath.

Use Case: 🛒 Products: The absolute best choice for e-commerce. It keeps the user on the page, doesn't force a page reload, and gives the user control over when to see more.

Infinite Scroll

As the user scrolls near the bottom of the grid, the next page automatically loads without them having to click anything.

Use Case: 📱 Social Feeds / Blogs: Great for highly-engaging visual content where you want users to mindlessly scroll and consume.

Numbered Pages

The classic 1, 2, 3 ... Next / Prev buttons. When clicked, it replaces the current grid items via AJAX and smoothly scrolls the user back to the top of the grid.

Use Case: 💼 Corporate Directories / SEO: Necessary when you need users to be able to jump to specific pages, or when you have extremely long complex lists.

Core Grid Settings

You can configure every aspect of the grid directly in the FilterX admin panel.

Setting	Description
Source Type	Choose what this grid displays (Posts, WooCommerce Products, Users, etc.).
Items Per Page	How many cards to show before triggering pagination.
Card Template	Select the visual design of the individual items (built with the Card Builder).
Sorting (Order By)	Default sort order (e.g., sort by Date, Title, Price, or randomly).
Empty State Message	Custom text to display when a user's filter combination yields zero results.

Developer Tools (REST API & Hooks)

FilterX is completely headless-ready and extensible through standard WordPress hooks.

⚡ REST API

Build your own custom frontend using React, Vue, or Next.js by querying our optimized endpoints:

GET /filterx/v1/grids/{id}/results

GET /filterx/v1/grids/{id}/preview

🔧 PHP Hooks

Inject custom HTML or modify query arguments on the fly using our action and filter hooks:

apply_filters('filterx/grid/query_args')

do_action('filterx/grid/before_render')

← Indexer & Auto-Sync Facets Engine →