Generic Grid: A Post Grid That Pages Itself Instead of Hiding the Rest

October 25, 2026
·
Shahidul Islam
Generic grid showing paginated post cards with category and date

A carousel is the wrong shape for an archive. It shows three cards, hides the rest behind an arrow, and gives the reader no idea whether there are six posts or sixty. That is fine for a decorative row on a home page and wrong for the page where somebody came to browse.

The generic grid is the other half of that pair. Same card, same query builder, but laid out as a grid with real pagination underneath. Everything is visible, the set has a visible end, and page two is a link rather than a click into the unknown.

It is a free widget, and the card it renders is deliberately plain: image, category, title, excerpt and a date badge.

Generic grid showing paginated post cards with category and date
A query laid out as a grid: every card the same shape, nothing hidden behind an arrow

Where a generic grid fits

  • A blog archive page. The obvious one, and the place where pagination matters most.
  • A category landing page. Point the query at one term and the grid becomes a real section index.
  • A case study or portfolio listing. A custom post type renders through the same card with no extra work.
  • A resources or downloads page. Guides, whitepapers and templates are posts, and a grid is how people scan them.
  • A news section on a corporate site. Announcements in date order, with the date badge doing useful work.
  • A property, course or job listing. The card is post shaped rather than blog shaped, so the content type does not matter.

Why it beats the usual approach

Post carouselTheme archive templateGeneric grid
How much is visibleThree cardsAll of itAll of it
PaginationNoneTheme’s ownBuilt in
Card design controlWidget’s controlsTheme, or codeWidget’s controls
Works for any post typeYesDependsYes
Editable without a developerYesRarelyYes

The middle column is the honest alternative. A theme archive works, but changing how the card looks means a template file, and that puts the layout out of reach of whoever actually maintains the page.

The features that matter

Pagination is part of the widget. A switch adds real paged navigation under the grid, so a set of forty posts becomes four pages instead of one very long column.

Columns are per breakpoint. Set the desktop count, then the tablet and phone counts, rather than accepting whatever a single number does at 390 pixels wide.

The query builder does the choosing. Post type, terms, order and offset are controls. A blog grid and a properties grid are the same widget with a different dropdown.

The card shows what a post actually has. Featured image, category, title, excerpt and a date badge. There is no author line, which keeps the card tight and is the honest description of what it renders.

Image height is a real height. The control writes an actual height alongside the minimum and maximum, which is what lets the image fill its box and crop to it rather than sitting in dead space at its natural ratio.

A play button overlay for video posts. The video settings group puts a play marker on the thumbnail, which makes the same card usable for a video archive.

Generic grid cards at two different column counts
Left: the top row with image, category label, title and a date badge. Right: the rest of the set below it

How to build it

  1. Drop the widget in and open Query. Choose the post type and the terms first, because everything else is presentation.
  2. In Layout, set columns for desktop, then tablet, then phone. Three, two and one is the usual answer.
  3. Set the image size and the title tag. The title tag decides page structure, so match it to the section around it.
  4. In Additional, switch the category, excerpt and date on or off, set the excerpt length, and turn pagination on if the set is longer than one screen.
  5. In the style tab, set the image height first. Everything else in the card sits under it, so changing it later moves everything.
  6. Set item padding. The default matches the class already on the markup, so leaving it alone is a valid choice.

Why it works

Every card is a real permalink to a real post, so the grid contributes internal links to the page rather than decorative images. On an archive page that is the entire job: help a reader get to the thing they came for, and help a crawler find it too.

Pagination matters more than it looks. A grid with no pagination either dumps every post onto one page or silently truncates the set, and both are worse than four clean pages. Real paged links also give search engines a crawl path through the archive.

A carousel is for a set the reader did not ask for. A grid is for a set they did. Getting that the wrong way round is the most common layout mistake on a blog.

The grid is CSS grid rather than a script, so there is no slider library to load and nothing to initialise. On a listing page that is already doing a query, that is the cheapest possible layout.

The offset control is worth knowing about on a blog front page. If a hero or a featured block above the generic grid already shows the newest two posts, set the offset to two and the grid starts at the third. Without it the page opens with the same article three times, which is the most common duplication on a WordPress home page and the one readers notice first.

The video settings group covers the case where some of your posts are films. It puts a play marker on the thumbnail, so a mixed archive shows at a glance which entries are watch and which are read. That is a small thing that saves a click, and it costs one switch.

Getting it right

  • Match the column count to the card. Four columns with an excerpt gives you four narrow paragraphs. Either drop to three or turn the excerpt off.
  • Use consistent featured images. A mixed set of portrait and landscape thumbnails is what makes a tidy generic grid look untidy. The image height control fixes it if the crop suits.
  • Set posts per page deliberately. It decides where the pagination lands. Nine or twelve suits a three column grid because the last row stays full.
  • Turn the date off when it does not help. An evergreen guide from two years ago does not benefit from a date badge, and a stale date costs clicks.
  • Keep excerpts short. Around twenty words keeps every card the same height without a fixed height fighting the content.
  • Check the image size WordPress is serving. A full size upload in a 300 pixel card is the most common cause of a slow archive page.
Generic grid with its pagination links under the cards
Pagination sits under the grid, so page two is a link rather than a click into the unknown

What else it can carry

The card is post shaped, not blog shaped. A properties post type renders with the photograph, the location taxonomy as the category, the title and a short description. A course type renders the same way with the level as the label. Nothing about the widget needs to know which one it is.

It also pairs with its own carousel sibling rather than competing with it. Use the carousel for the recent-posts row on a home page, where three cards is the point, and the generic grid for the archive the row links into. Both read from the same query builder and render the same card, so the two pages look like one site.

For a blog front page that needs more than a listing, the widgets around it matter. A showcase flow suits a compact feature strip, and a showcase wall suits a set where the images are the argument rather than the titles.

Generic grid on a desktop and a phone screen
One column on a phone, with the same card and the same pagination

Generic grid: common questions

Is the generic grid free?

Yes. It is a widget in the free Sky Addons plugin, including the query builder, the pagination and the per breakpoint columns.

Does it need another plugin?

No. Elementor and Sky Addons are enough. It reads whatever post types your site already registers.

Will it slow the page down?

It is a CSS grid with no slider library, so the cost is your featured images at the size you choose. Selecting a registered image size rather than full size is the single biggest thing you can do here.

Does it work on mobile?

Yes. Columns, spacing and image height are all per breakpoint, and one column with a slightly taller image is the usual phone setting.

Does the card show the author?

No. This card renders the image, category, title, excerpt and a date badge. If an author line matters, one of the other post widgets in the plugin is the better fit.

The short version

The generic grid lays a query out as a paginated grid of consistent post cards: image, category, title, excerpt and a date badge, with per breakpoint columns and real paged navigation. It is the archive shape, where a carousel is the row shape, and it is free.

Build it

See it running on the Generic Grid demo, then read the control reference in the Generic Grid documentation. It is part of the free plugin: see what else is included on the free versus Pro page, and the plans on pricing.

Written by
Shahidul Islam
Writes about the work behind the widgets — what shipped, why, and what it cost.
Share
In this post

More from the journal

Generic Grid: A Post Grid That Pages Itself Instead of Hiding the Rest

Generic Grid: A Post Grid That Pages Itself Instead of Hiding the Rest

The Generic Grid turns any query into a paginated Elementor post grid: image, category, title, excerpt and a date badge, with real pagination. Free.
Remote Carousel Controls: Move the Arrows Anywhere on the Page

Remote Carousel Controls: Move the Arrows Anywhere on the Page

Remote carousel controls put a slider's arrows, dots or thumbnails anywhere on the page. Three Pro widgets drive any Sky Addons carousel by selector.
Generic Carousel: One Post Carousel That Fits Whatever You Publish

Generic Carousel: One Post Carousel That Fits Whatever You Publish

The Generic Carousel turns any query into an Elementor post slider: image, category, title, excerpt and a date badge, with seven groups of controls. Free.

Comments are closed.