facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Create a grid layout for your WordPress Blog in one simple step

In our popular post Set up a blog with Beaver Builder the right way we explained why you should use the default WordPress blog and NOT use the Beaver Builder Posts module, as the posts module does not integrate with plugins and can be limiting.

But we felt guilty.

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

We’d told you not to use the posts module but we didn’t explain how you can customize the default WordPress blog to have the same layout options as the Posts module.

In this tutorial we’re going to show you how you can convert the default WordPress blog into a grid layout so you don’t have to use the Beaver Builder posts module and limit yourself.

NOTE: The below CSS applies specifically to the Beaver Builder theme but you can use the logic of the CSS and alter the CSS class names to match your theme. Please comment at the bottom of this post with your URL if you’d like some help setting this up with your theme.

How the Beaver Builder Theme’s blog looks by default

If you’ve got some blog posts in your WordPress website, and you’ve created a Blog page and set this Blog page to be used for your Blog by going to WordPress Dashboard > Settings > Reading > Posts Page, you’ll have something like the below.

beaver-blog-grid-standard-layout

NOTE: With the Beaver Builder theme you can set different layouts for your blog by going to your WordPress Dashboard > Appearance > Customize > Content > Archive Layout. Below is a screenshot of the settings we’ve used to have the blog appear like the above screenshot. We recommend you use these same settings to follow this tutorial.

beaver-blog-grid-customize-settings

Now, let’s turn this default blog into a grid!

Step 1: Add CSS to make the posts display as a grid with 2 blog posts across horizontally

As we’re wanting to keep the Blog Sidebar on our Blog page, 3 posts across horizontally would be too compact and look messy, so we’re going to opt for 2 posts across a row.

To do this, add the below CSS.

And you’ll now have something similar to the below.

beaver-blog-grid-grid-2-across-layout

After adding some simple CSS, we now have a grid layout for our blog.

And on mobile devices, the posts go back to taking up 100% of the width, as per below.

Our blog layout unsets the grid and reverts back to the default layout on smaller devices where there isn't enough space to have the blog posts remain in a grid and sit next to each other.

Our blog layout unsets the grid and reverts back to the default layout on smaller devices where there isn’t enough space to have the blog posts remain in a grid and sit next to each other.

What the above CSS does:

  1. @media only screen and (min-width: 992px) {} is a CSS media query and is used so that our Blog only displays as a grid on larger devices. A grid on small devices would be too busy and messy, so on smaller devices (mobile phones etc) the grid will go back to the default layout we had before we added this css.
  2. .fl-archive .fl-post{width:48%;float:left;margin-left:4%;} adjusts every post on our blog page to be 48% in width and to have a margin to the left of the post. The float:left positions the posts next to each other.
  3. .fl-archive .fl-post:nth-child(odd){margin-left:0;clear:both;} removes the margin-left on each second blog post. If you think about it, in the line .fl-archive .fl-post{width:48%;float:left;margin-left:4%;} we have said that each post is 48% in width and has a 4% margin left, which, if you add this together for 2 blog posts next to each other, it is (48% + 4%) + (48% + 4%) = 104%, and this won’t work as we need it to be 100%. So, by doing margin-left: 0 on every second blog post, we’re making it 100% so that they can sit next to each other on the row.

Altering the grid layout for your WordPress Blog to have 3 blog posts across horizontally

Let’s build upon the logic here and change a couple lines of CSS to have 3 blog posts across a row instead of 2.

First things first

To have enough space to site 3 blog posts next to each other, let’s remove the Blog Sidebar in the Beaver Builder theme by going to the WordPress Dashboard > Appearance > Customize > Content > Blog Layout and set the Blog Sidebar to No Sidebar, as per below.

beaver-blog-grid-remove-blog-sidebar

And you should have something like the below (which you might even like to use for your blog).

beaver-blog-grid-no-sidebar-2-across

Now, let’s get 3 blog posts across horizontally with a couple of simple CSS changes

If you followed the tutorial above to have 2 blog posts across horizontally, replace that CSS with the CSS below.

And you should end up with something like below after you add the above CSS.

beaver-blog-grid-no-sidebar-3-across

And, again, on mobiles, the grid is reverted back to…not being a grid, like the below.

Our blog layout unsets the grid and reverts back to the default layout on smaller devices where there isn't enough space to have the blog posts remain in a grid and sit next to each other.

What the above CSS does:

  1. @media only screen and (min-width: 992px) {} does the same thing as discussed above. It ensures our grid code only applies to medium devices and up.
  2. .fl-archive .fl-post{width:30%;float:left;margin-left:5%;} makes each post 30% and gives each post a margin of 5% to the left of the post.
  3. .fl-archive .fl-post:nth-child(3n+1){margin-left:0;clear:both;} targets the first post on each row and removes the margin to the left of the post so that the grid lines up on the left side. The clear:both ensure that it sits under the posts above.

Making a blog with 3 posts across for larger devices, 2 posts across for medium devices, and no grid on small devices

This will be easy. You’ve already learnt everything to do this but let’s just put it all together.

If you’ve followed this tutorial, update the CSS you’ve added and replace it with the below CSS.

What the above CSS does:

  1. @media only screen and (min-width: 992px) {} does the same thing as discussed above. It ensures our grid code only applies to medium devices and up. All the code that is placed in this is exactly the same as what we placed earlier in the tutorial when we were getting the blog posts to have 2 across horizontally.
  2. @media only screen and (min-width: 1200px) { is a new CSS media query we’re adding and the code we place in here overrides the code we added in the @media only screen and (min-width: 992px) {} media query. Here, we are using the code we added previously in this tutorial to make the grid 3 blog posts across, but there are some changes you should take not of. We remove some margins and stop the posts clearing.

The final result of the above CSS

Wa-la! As per below, mobiles have no grid so that the posts can take up 100% of the width and be easily read. On devices 992px in width or larger, the grid goes to a 2 column grid. Then, when we have the extra room larger devices provide (devices 1200px or wider) we change our blog to a 3 column grid.

grid layout for your WordPress Blog responsive behavior

Wrapping it up

Using a grid layout for your WordPress blog is a great way to display your blog posts in a more compact way so that your readers can more easily browse your blog. There are many different ways you can go about achieving the grid layout for your WordPress Blog, but not all ways are equal and as flexible.

You could easily create something similar to this using the Beaver Builder Posts module but there are real downsides to using this module, as we discussed in this post Set up a blog with Beaver Builder the right way.

By using the technique explained in this article, you are able to combine the benefits of using the native WordPress blog functionality with the power off CSS to get a great looking grid of posts and, importantly, you are still able to use plugins (such as a social sharing plugin) and integrate them with the posts in the grid. Just like below.

beaver-blog-grid-no-sidebar-3-across-with-social-share-plugins

Leave a comment

Comment below and show us where you use this technique. We’d love to see!

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x