For the purpose of this tutorial, you will need to use a plugin named as Post Grid. This is a free plugin, plus the grid layout is responsive which means it is suitable on mobile devices also. Install and activate this plugin and then you will be able to see a new menu for “Post Grid” in your WordPress Dashboard.
Go to “Post Grid” and click on “New Post Grid” to create a new post grid.
Now, you will notice that this page has various tabs. First go to the “Query Post” tab where you can select what content do you want to display in the grid. Normally you would select “Post” from the list, but you can also select other content type. There are also options to exclude a post, or how many posts to display per page.
Next click on the “Layout” tab. From here, you can choose a layout for your grid such as flat, flat center, flat right or flat left, and then you can also select skin. Skin basically means the effect that will happen when the mouse is hovered on the thumbnail. You will be able to see a live preview of the effect right on this page.
Next, click on the “Layout Settings” tab. The settings here should work on most sites but if you are facing some problem in the layout, then this is where you can fix it. You can select grid item width, media height, featured image size, etc options.
From the “Navigation” tab, you can select your pagination style from Lite or Dark. Once you are done with all the settings, now it’s time to hit the Publish button.

Displaying posts in Grid layout

This final step is very simple. You just need to go to the “Shortcodes” tab and copy the shortcode from there.
Once copied, paste it on a new WordPress page where you want to display your posts in a grid layout. Finally click on the Publish/Update button and then visit the same page to see your posts in grid layout.
There is also an option to get the PHP code which you can add in the theme file directly, but getting the shortcode and adding it to a page or a post where you want to display the grid layout is an easy idea.

TAGS :