How to Display Your WordPress Posts in Grid Layout Best Way - WPXPO
Back To Blog

How to Display Your WordPress Posts in Grid Layout Best Way

Grid Layout Gutenberg

Grid layout feature that makes WordPress very good for blogging. Many themes don’t come with this feature. Several plugins are available in the store that you can use to display your WordPress posts in a grid layout. A grid layout makes the blog look more attractive and also allows you to put the focus on some special blog that you want to draw the attention of your visitors. 

The Gutenberg Post Blocks is one of the best plugins out there for using a grid layout. It comes with 7 different post grid layout which you can use even in the free version. 

Why choose Gutenberg Post Blocks for Grid Layout?

When you go to search in the plugin store for Worpress plugins you would see many different plugins that you can use to display your blogs in a grid layout. Out of so many plugins, the Gutenberg Post Blocks stands out from the crowd because of the unique features it comes with. 

How to use Gutenberg Post Blocks for a Grig Layout?

After you have installed the Gutenberg Post Blocks in your WordPress website from the Plugin in store come to the homepage of your website. 

How to Display Your WordPress Posts in Grid Layout Best Way 1
Grid Layout Home Page Settings
Grid Layout All Blocks
All Blocks

The Gutenberg Post Blocks is very easy to use and you just need to click the plus icons on your home page to see the different premade layouts that you can choose from. Though there are many other premade templates for your blog, we would only focus now on the grid posts blocks.

Click the plus icon on the home page and a popup menu would appear which would let you choose from all the seven grid layout templates.

You can select the post grid layout that you think is best for your blog. You can choose more than one post grid layout for your blogs so your homepage can look more appealing. 

How to customize the design of the Grid Layout?

All seven post grids in the Gutenberg Post Blocks comes with only one layout template in the free version. You can upgrade to the pro version to unlock more layout options to design your blog better. But the free version also gives you a lot of customization that you can do to make your blog unique.

Grid Layout System
Grid Layout System

There are so many readymade designs that you import for your blog. In the free version, the design choices are more limited compared to the pro version.

Grid Layout Readymade Design
Grid Layout Readymade Design

You can also use the advanced features in the design section for better CSS grid responsive options. 

Grid Layout Advanced Settings
Grid Layout Advanced Settings

How to customize the settings of the Grid Layout?

All the seven post grid layout in the Gutenberg Post Blocks comes with multiple settings that you can customize to make the block perfectly suitable for your traffic. You can play around with all the settings to see what fits your need. We would be discussing some of the most important settings that you should optimize to make your block posts look very attractive. 

General Settings

In general settings, you can choose the number of columns you want in the post grid layout. You can also choose the gap between each blog post so the blog can look neater. 

Blocks General Settings
Blocks General Settings

Many other customization features allow you to choose whether show or not the heading, title, excerpt, meta, and other details of the blog post. If it is set to be shown then the button would be blue. If you turn it off so it stays hidden the button would appear to be white. You can also choose the alignment of the blog posts. 

Heading Settings

The heading of the post blocks can be customized. The name would appear by default “Post Grid #” which you can change. There are 20 heading styles in this section for you to choose from. The typography, color, border size, and color can be changed in this section. 

Heading Settings
Heading Settings

Image Settings

Image is a very important part of a blog post. The Gutenberg Post Blocks allows you amazing image customization options. You can choose the size from the drop-down and also select various kinds of hover animation to attract more visitors to read the blog.

Blocks Image Settings
Blocks Image Settings

There is a section where you can choose the intensity of grayscale in the image. By default, it stays at 0. You can choose the image to overlay. 

Pagination Settings

Blocks Pagination Settings
Blocks Pagination Settings

Each post grid blocks comes with pagination settings. You can choose from three types of pagination display in the Gutenberg Post Block and it makes your blog easier to navigate. You can also play with the pagination buttons and change their appearance. You can also allow ajax pagination in this section or you can choose to turn it off. 

Other Settings you should know about

You can check out the heading, title, content wrap, query, and separator settings that are available in the settings of all the post grid blocks. All these sections are very easy to navigate and use. The Gutenberg Post Block is made keeping in mind the features that a website developer would want. The settings for all the post grid layouts are the same more or less. You can also choose the advanced settings option to do some custom CSS to the grid layout if you are good at coding. 


You don’t need to have coding skills to make a killer blog anymore. Gutenberg Post Blocks now made it very easy to create posts in a grid layout for your blogs. 

After installing the Gutenberg Post Blocks, you would find out that it is very easy to use and you can choose from various kinds of customization options. 

Written byAsir Muntasir

I have been doing SEO Content Writing for over two years. I am also experienced in technical writing and want to learn more about its various dimensions.

Leave a Reply