A standard blog feed (a vertical column of posts, one below another) works fine when you have ten entries. When you have a hundred, vertical scrolling turns into an endless scroll: readers lose interest by the third screen, and view depth drops to zero.

A post gallery (a grid of cards in 2-4 columns) solves the problem efficiently. A single screen fits three times as many posts, the eye has something to catch, and click-through rates increase thanks to large thumbnails. For a homepage, category page, or custom landing page, this is the most effective format.

Below are three ways to build a post gallery in WordPress. From a fully built-in approach (no plugins) to flexible code for developers. Each includes specific steps, no vague generalities.

💡 Quick overview:

• Choose your method: the built-in Query Loop block (no plugins), the Post Grid plugin (maximum customization), or custom code using WP_Query + lightbox (for developers).
• For Query Loop: open a page in the editor, add a Query Loop block → Start Blank → select a card template → enable Grid View → configure columns.
• For Post Grid: install the plugin from the WordPress.org repository, create a grid in Post Grid → Add New, configure the query and appearance, insert the shortcode into any page.
• For custom code: add WP_Query with pagination to a theme template, wrap the output in a div grid using CSS Grid, connect GLightbox or Fancybox for popup windows.

Method 1: Query Loop block, no plugins

Since version 5.8, WordPress core includes the Query Loop block. Now, in WordPress 7.0, it is a mature tool: a constructor that displays a post grid directly in the block editor. No plugins, shortcodes, or theme file edits.

Create a new page or open an existing one, click "+" in the editor. Find "Query Loop" and add the block. It will offer several ready-made layouts; select Start Blank to build a card from scratch.

A prototype will appear before you: a single post with a thumbnail, title, and date. Now the key step: on the block toolbar, click the Grid View icon (a grid of squares). The list will instantly turn into a grid. The number of columns is configured in the sidebar; for most themes, 3 is optimal.

Configure the card content for your needs. Click on the thumbnail and in the sidebar enable the Link to Post toggle; now clicking the image leads to the post. Do the same for the title. The date can be removed: click on it → three dots → Remove Date.

Additional Query Loop settings are in the block sidebar: category selection, sorting (by date, by title, random), and number of posts per page. If you need to exclude certain posts, use the Exclude field.

Pros: completely native, doesn't slow down the site, works with any block theme. Cons: no category filtering without page reload and no complex animations; for that, you need a plugin.

Method 2: The Post Grid plugin, maximum flexibility

When the built-in Query Loop isn't enough and you need filtering, masonry layout, a slider, or hover effects, The Post Grid by RadiusTheme takes the stage. This plugin has over 250 ratings and 100,000+ active installations on WordPress.org, tested up to version 6.9.4.

Installation is standard: Plugins → Add New → search "The Post Grid" → Install → Activate. After activation, a Post Grid → Add New menu item appears.

The grid creation process has four steps:

Step 1, Query Post. Choose the content type: posts, pages, or a custom type. Filter by categories, tags, authors. Sort order: by date, title, or random. The number of posts is also set here.

Step 2, Layouts. Click Create Layout and build the card visually: tags are available for thumbnails with and without links, title, date, author, and excerpt. Drag the needed fields onto the canvas and click Publish. Return to the grid settings and select your newly created layout.

Step 3, Item Style. Configure padding, border radius, shadow, fonts, and colors. The number of columns for desktop, tablet, and mobile is also set here.

Step 4, Shortcode. Copy the generated shortcode, open a page in the editor, add a Shortcode block, and paste the code. Done.

The Pro version adds AJAX filtering (readers switch categories without page reload), plus infinite scroll, masonry grid, and custom post type support. Pricing starts at $49 per year.

Pros: full control over appearance, works with any theme and page builders (Elementor, Divi). Cons: the free version lacks AJAX filtering and masonry; the plugin adds CSS and JS, so on very lightweight sites the 50-80 KB increase may be noticeable.

Method 3: custom code with WP_Query, for developers

If you're building a theme from scratch or modifying a child theme, you can build the gallery entirely with code. This is lighter than a plugin (not a single extra kilobyte) and gives you absolute control over the HTML structure.

The template below is a minimal working entry point. Add it to a theme file (for example, front-page.php in a child theme) or via the Code Snippets plugin with a hook on template_redirect:

1
<?php
2
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
3
$args  = array(
4
    'post_type'      => 'post',
5
    'posts_per_page' => 12,
6
    'paged'          => $paged,
7
    'orderby'        => 'date',
8
    'order'          => 'DESC',
9
);
10
$query = new WP_Query( $args );
11
if ( $query->have_posts() ) : ?>
12
    <div class="post-grid">
13
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
14
            <article class="post-card">
15
                <a href="<?php the_permalink(); ?>">
16
                    <?php the_post_thumbnail( 'medium_large' ); ?>
17
                    <h3><?php the_title(); ?></h3>
18
                </a>
19
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
20
                    <?php echo get_the_date(); ?>
21
                </time>
22
            </article>
23
        <?php endwhile; ?>
24
    </div>
25
    <?php the_posts_pagination(); ?>
26
<?php endif; wp_reset_postdata(); ?>
27

CSS grid, native CSS Grid, no frameworks:

1
.post-grid {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    gap: 24px;
5
}
6
@media (max-width: 768px) {
7
    .post-grid {
8
        grid-template-columns: repeat(2, 1fr);
9
    }
10
}
11
@media (max-width: 480px) {
12
    .post-grid {
13
        grid-template-columns: 1fr;
14
    }
15
}

Three columns on desktop → two on tablet → one on phone. repeat(3, 1fr) means "three columns of equal width," and gap: 24px sets the spacing between cards.

For a random gallery, replace 'orderby' => 'date' with 'orderby' => 'rand'. The query shuffles posts on every page load, exactly what the original idea of this tutorial describes.

The lightbox is connected separately. Two proven options: GLightbox (free, around 5 KB gzipped, no jQuery) and Fancybox 5 (MIT license, built-in gallery support). Add a data attribute to the link:

1
<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="glightbox" data-gallery="post-gallery">
2
    <?php the_post_thumbnail( 'medium_large' ); ?>
3
</a>

Initialize GLightbox in your main.js:

1
const lightbox = GLightbox({
2
    selector: '.glightbox',
3
    touchNavigation: true,
4
    loop: true,
5
});

This approach gives you a fully custom post gallery with a lightbox that weighs under 10 KB on top of the standard WordPress load. Important: before editing theme files, make a full backup using the Duplicator plugin or a hosting snapshot. If you're placing code in functions.php, use a child theme so you don't lose changes when updating.

Watch a short video: installing The Post Grid in 8 minutes, from searching for the plugin in the repository to a live grid on the page:

⁉️🤔 Frequently asked questions

Which method should I choose for a regular blog?

If you have a block theme, start with Query Loop. It's a built-in block, zero plugins, and no site slowdown. For three columns with thumbnails, it's more than enough. Move to a plugin only when you need masonry layout or filtering without page reload.

Why do I need a post gallery if my theme already shows posts?

A standard theme feed is a vertical list. A grid gallery fits 3-4 times more posts on the first screen. Density → higher engagement → lower bounce rate. For homepages and custom landing pages, this is critical.

Does Query Loop work with classic themes?

Yes, if the theme hasn't blocked the block editor via remove_theme_support. For very old themes built on shortcodes and widgets, The Post Grid is a better choice since it works with anything through a regular shortcode.

Can I make a post grid with a lightbox for free?

Yes, method 3 is completely free: WP_Query from core + CSS Grid from core + GLightbox under the MIT license. Zero cost, pure performance. The downside is that you need basic PHP and CSS knowledge.

Will Query Loop break my site when WordPress updates?

No. Query Loop is a native core block; it updates with WordPress and undergoes full testing in every release. The showposts parameter (the old approach with get_posts) was deprecated back in version 3.1, and modern methods don't break during major updates.

How do I change the number of columns on mobile?

In Query Loop, use the block sidebar under Grid Settings: you can set a different column count for each breakpoint (desktop, tablet, mobile). In The Post Grid, go to the Item Style step for the same breakpoints. In custom code, use media queries in CSS (as shown in the example above).

Which method to use in 2026

For nine out of ten sites, the Query Loop block is sufficient. It's native, lightweight, and can be assembled in two minutes without documentation. If you need category filtering without page reload, masonry grid, or Elementor integration, install The Post Grid: 100,000+ installations and over 250 ratings on WordPress.org speak for themselves.

Custom code with WP_Query is the choice for those building a theme from scratch or maintaining a high-load site where every kilobyte counts. It's also the only way to get a random post gallery without plugins: 'orderby' => 'rand' in the WP_Query arguments does exactly what developers used to write pages of code for ten years ago using get_posts and homemade lightboxes.

Choose the method that fits your task and make the first screen of your site dense; readers will thank you by scrolling down.