No-Code WordPress Post Grid Layout Methods

Searching for a solution to display your WordPress posts in a grid layout?

You’ve found your way to the right spot because we’re going to show you several different code-free ways to create a grid of your posts using either built-in features or free WordPress plugins.

If your theme doesn’t include a built-in grid layout (which many don’t), these methods will help you get up and running. And even if your theme does come with a grid layout, you’ll still probably prefer these methods because they’ll give you a lot more flexibility.

And again – all of this is 100% code-free. So you do not need any special knowledge to set up your grid layout.

We’ll start with some quick example use cases for these types of grids. Then, we’ll show you two built-in features for grid layouts and seven free WordPress plugins to display posts in a grid.

Some Ideas for How to Use a Post Grid Layout on WordPress

Being able to show your posts in a grid layout can be handy in a lot of different situations.

First off, you can use it to create the main page that lists all of your blog posts – called the “archive” page in WordPress terminology. Using a grid layout can look more professional than a standard list layout and also makes it easier for visitors to quickly see multiple posts without needing to scroll down the page.

Or, you can use your grid in more targeted ways. For example, you could create a grid of all the posts from a specific author, a grid of the posts in one category or with a certain tag, etc.

This targeted functionality means that you can also use your grid to create your own “magazine layout”. That is, you could create separate grids for different categories of content on the same page.

Finally, you can also use a grid layout for a lot more than just blog posts! For example, you could create a grid to showcase:

• WooCommerce products.
• Important pages.
• Content from any custom post type – such as portfolio items, events, directory listings, job postings, and more.

Basically, there are a lot of different directions that you can take this functionality. So, now that you have some inspiration, let’s talk about how you can create your grid layout.

Two Built-in Features to Display WordPress Posts in a Grid Layout

With WordPress.com, you get two built-in features to display your posts in a grid:

1. The WordPress.com Blog Posts block.
2. The WordPress Query Loop block.

1. WordPress.com Blog Posts Block

For a simple way to display a grid of your posts, you can use the WordPress.com Blog Posts block. This block was specially created for everyone whose sites are hosted with WordPress.com.

To use it, all you need to do is add the Blog Posts block to the editor where you want to include your grid layout. Make sure to select the Grid View display option from the block’s toolbar.

Then, if you want more control over how your grid functions, you can use the sidebar to control which posts to display and other useful settings. 

2. Query Loop Block

The Query Loop block is a core WordPress feature that you can use to create a post grid layout. This block is a little more complicated than the WordPress.com Blog Posts block, but the advantage of going through that added learning curve is that you get the ability to create a completely custom template for your grid layout.

Essentially, the Query Loop block lets you build your own custom layout that will “loop” through some or all of your posts. In more casual terms, this means that the block will display each individual post according to the template that you create. It goes like this:

1. Create a template to control the layout of a single post.
2. Tell your site how many columns and rows you want to repeat that template.
3. Your site will automatically fill in your latest posts according to your template and rows/columns (or posts from a certain category, tag, author, etc.).

Here’s how to set it up…

First, add the Query Loop block. Then, choose the grid view option at the top and select the Grid template (you’ll be able to customize it in a second):

Now, you should see a preview of your template. You can use the Query Loop block settings to control how many columns and rows to use:

You can then use the editor to customize the template by adding blocks from the Theme section. For example, if you want to include the featured image of each post in your template, you could add the Post Featured Image block. Then, the featured image will appear for every post:

For a more detailed look at this block, you can check out the full documentation for the Query Loop block.

Again, the Query Loop block is more advanced than the other solutions on this list. So if you feel a bit overwhelmed by it, it’s totally fine to use a different solution on this list – such as one of the plugins below.

Seven WordPress Plugins to Display Posts in a Grid Layout

For more flexibility, you can also use a WordPress plugin to display posts in a grid. Here, we’ll cover seven great options, all of which have a free version.

One quick note – you’ll need to be on the WordPress.com plugin-enabled plans to install plugins on your site. If you’re not on one of those plans, you’ll want to stick with the two methods above.

1. Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg is a free plugin that adds a range of new blocks to the editor, including multiple post grid blocks for a basic grid layout or a masonry layout.

To use it, open the editor where you want to include your post grid and add either the Post Grid or Post Masonry block, depending on the type of grid layout that you want to create.

You can then use the block’s settings to control how your grid functions and what content to include.

The Ultimate Addons for Gutenberg plugin is 100% free.

2. The Post Grid

The Post Grid is a free plugin that, as the name suggests, is 100% focused on helping you create a grid of your blog posts.

Here are two unique features of this dedicated plugin as compared to the previous solution:

1. It lets you add filters to your grid so that visitors can filter out content with a certain category or tag.
2. It includes more layout options.

To create a grid, you can go to The Post Grid → Add New Grid in your WP Admin. There, you can use the many settings to customize your post grid. You’ll also get a live preview of your grid at the bottom:

To display your post grid, you’ll need to add the shortcode from the grid editor where you want the grid to appear.

The core The Post Grid plugin is free, but there’s also a premium version that adds more features for $21.

3. Stackable

Like Ultimate Addons for Gutenberg, Stackable is another plugin that adds a large selection of new blocks to the editor. One of those blocks is the Posts block, which lets you display your posts in several different layouts, including multiple types of grids.

One nice thing about this plugin is that it includes “card layouts”, which add a nice modern card effect to your post’s featured images (you can see this in the screenshots below).

To insert the post grid, open the editor for the piece of content where you want to insert your post grid. Then, add the Posts block from Stackable. 

The block will use a grid layout by default and you can use the block’s settings to control how your grid looks and what content to include:

The Posts block is available in the free version of Stackable. However, there’s also a paid version that adds more design and layout options for $49.

4. Post Grid

Like The Post Grid, Post Grid (no “The”) is another creatively named plugin that helps you customize and display a grid of your blog posts or other content.

One of the unique things about this plugin is that it gives you a simple drag-and-drop builder to create your own templates for how to display post content in your grid:

Once you have your layout, you can go to Post Grid → Add New to set up a grid, including choosing how many content items to display, querying different content types, and more.

To display your post grid on your site, you can embed it anywhere using a shortcode. 

The core Post Grid plugin is available for free. To access more features, there’s also a premium version that costs $19.

5. Genesis Blocks

Genesis Blocks is another free plugin that adds a new collection of blocks to the editor, including a dedicated Post or Page Grid block that you can use to display any type of content in a grid layout.

It doesn’t give you quite as much control over the design as Ultimate Addons for Gutenberg or Stackable, but it offers all of the basic features that you need including the ability to filter out specific content, options to control what content elements to display, and more.

The Post and Page Grid block is available for free. There is a premium version of the Genesis Blocks plugin, but you don’t need it to create a post grid.

6. PostX

PostX is a popular plugin that’s focused 100% on adding flexible post grid blocks to the WordPress editor.

One of the unique things about this plugin is that it gives you 70+ different premade layouts that you can use for your grids, including some unique options that you don’t get with other plugins.

To use PostX, you’ll work primarily from the WordPress editor, though PostX also offers some settings in your WP Admin.

In the editor, PostX adds a number of different post grid blocks that you can choose from – you can hover over each block to see a live preview. You can also click the Block Library button to access other premade layouts:

Once you insert one of the blocks, you can use the block settings sidebar to control the design, what content to include, and lots more:

The core PostX plugin is free. However, there’s also a premium version that unlocks more designs and settings for $49.

7. Kioken Blocks

Finally, let’s look at Kioken Blocks, another plugin that adds new blocks to the editor. To display a post grid, you’ll use the Kinetic Posts block, which lets you display your posts in a grid or masonry layout.

One nice thing about this plugin is that it gives you a lot of design options. For example, you can display the post title on top of the featured image, which is something that a lot of the other blocks don’t offer. You can see an example of this in the screenshot below.

To create a post grid with Kioken Blocks, add the Kinetic Posts block where you want your grid to appear. Then, you can use the block settings to control the layout, what content to feature, and more:

Kioken Blocks is 100% free.

Create Your Own WordPress Post Grid Layout Today

Being able to display your posts in a grid layout can come in really handy when you’re working on your WordPress site. You can use it to…

• Create your main posts page.
• Insert more targeted blog lists, such as listing all of an author’s posts.
• Create a magazine layout that features posts from different categories.
• Show other types of content beyond blog posts, such as your WooCommerce products or content from a custom post type.

With WordPress.com, you get two built-in options for displaying post grids – the WordPress.com Blog Posts block and the Query Loop block.

If you’re on the WordPress.com plugin-enabled plans, you can also install a dedicated WordPress plugin to display posts in a grid.

Choose the solution that works best for your needs and you’ll be up and running with your first post grid layout in no time!