Post Grid
Show your posts as cards readers can filter and browse.
Posts, pages or products as cards in a grid or masonry — ten skins, a lead story, a category filter and load-more, infinite or numbered pagination without a page refresh, with real links that work without JavaScript.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Post Grid — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
Posts
| Setting | What you can set |
|---|
| Source | Text |
| Posts per page | 1–48 |
| Order by | date, modified, title, comment count, menu order, rand or post in |
| Order | DESC or ASC |
| Only in these terms | Text |
| Leave out these terms | Text |
| Related by | terms, category, post tag or author |
| Published | any, week, month, quarter or year |
| Skip the first posts | 0–20 |
| Leave out the post being viewed | On / off |
| Only posts with a featured image | On / off |
| Sticky posts first | On / off |
| Date | On / off |
| Message when there are no posts | Text |
Layout
| Setting | What you can set |
|---|
| Layout | grid or masonry |
| Columns | 1–6 |
| Columns on tablets (≤ 1024 px) | 1–6 |
| Columns on phones (≤ 600 px) | 1–4 |
| Column gap (px) | 0–80 |
| Row gap (px) | 0–80 |
| Equal card heights | On / off |
| Highlight the first post | On / off |
| Lead size | 2×2, 2×1 or full |
| Lead card skin | Text |
| Cards entrance | none, rise or fade |
Card
| Setting | What you can set |
|---|
| Skin | classic, hawai, standard, monastic, stylica, outbox, crossroad, overlay, … (10 in all) |
| Image size | medium, medium large, large or full |
| Image shape | 1 / 1, 4 / 3, 3 / 2, 16 / 9, 21 / 9, 3 / 4, 4 / 5 or auto |
| Image on hover | none, zoom, zoom out, gray, tilt or bright |
| Card on hover | none, lift, shadow or accent |
| Text alignment | left, center or right |
| Title tag | h2, h3, h4, h5, h6, div or p |
| Title lines (0 = all) | 0–5 |
| Excerpt | On / off |
| Excerpt length (words) | 3–120 |
| Excerpt lines (0 = all) | 0–8 |
| Read more link | On / off |
| Read more text | Text |
| Read more style | link, button, outline or underline |
| Open posts in a new tab | On / off |
| Whole card is a link | On / off |
| Alternate sides | On / off |
| Image width (%) | 20–70 |
| Show the excerpt on hover | On / off |
| Card height (px) | 160–700 |
| Image edge | mountain, wave, curve, tilt, torn, splash, zigzag, cross, … (10 in all) |
| Flip the edge | On / off |
| Corner radius (px) | 0–40 |
| Setting | What you can set |
|---|
| Category badge | On / off |
| Badge position | image tl, image tr, image bl or above |
| Badges per card | 1–3 |
| A colour per category | On / off |
| Date box on the image | On / off |
| Author | On / off |
| Author photo | On / off |
| Comments | On / off |
| Reading time | On / off |
| Categories | On / off |
| Meta icons | On / off |
| Meta position | above, below or footer |
| Separator | none, dot, slash, pipe or dash |
| Date format | default, M j, Y, j M Y, Y m d or relative |
Category filter
| Setting | What you can set |
|---|
| Filter bar | On / off |
| Filter by | Text |
| Buttons, in this order | Text |
| Number of automatic terms | 1–20 |
| “All” button | On / off |
| “All” label | Text |
| Post counts | On / off |
| Style | pills, underline, boxed, segmented, minimal or dropdown |
| Alignment | left, center or right |
| One scrolling row on phones | On / off |
| Alignment | left, center, right or between |
| Setting | What you can set |
|---|
| Pagination | none, numbers, prev next, both, load more or infinite |
| Page limit (0 = all) | 0–50 |
| Previous label | Text |
| Next label | Text |
| Button label | Text |
| All loaded message | Text |
| Scroll back to the grid on page change | On / off |
| Accent (badges, links, active filter) | Colour |
| Titles | Colour |
| Text and meta | Text |
| Card background | Colour |
| Overlay shade | Text |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- The signed attributes are printed on the page (in data-attrs) when a filter or AJAX pagination is used. They contain only display settings, nothing private.
- Two grids with identical settings on one page share the same address key (iwp-<id>) for no-JS paging. Changing any setting gives a different key.
- The stylesheet (about 30 KB) loads as a file rather than inline.
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Also available for Elementor (Post Grid), Divi (Post Grid).
- Works well with: Card, Content Switcher, Feature List.
