How To Create a Grid Layout in WordPress with Flexbox

Posted on Saturday, July 16th, 2016 No Comments


How to Create a Grid Layout in WordPress with Flexbox

This post will show you how to use Flexbox CSS to create a grid layout for blog posts in WordPress.

Flexbox is a great solution for this because:

  • By using flex-wrap, your grid will be automatically responsive
  • You can set a specific height and width for each item so that each one is identical in size

 

Resources

Before you get started, you might want to open these resources and have them on hand:

 

Live Example

This is the method that I used in the development of the Magazazz theme. The themes from Zen Web Themes are no longer active, but here’s a screenshot:

cover

 

The Overall Idea

This is how the concept works:

  1. You create a wrapper for the entire grid, which is the flex container. In this case, it’s an unordered list.
  2. You use the WP Loop to spit out each blog post within a list item. Each list item is a flex item. You can include whatever content you want inside each item, such as the post’s featured image, title, post date, author name, and excerpt.

There’s not much code required for this, but you have to get the flex properties right. Below we’ll look at HTML & CSS that is similar to what I used for Magazazz.

 

The HTML

This is what the HTML could look like. It has comments throughout that tell you what each part is for.

You can use this in any template file where you want to display a listing of blog posts, such as home.php, index.php, or archives.php.

 

The CSS

This is what the CSS could look like. It has comments throughout to tell you what each part is for.

You should definitely look through A Complete Guide to Flexbox to gain a better understanding of what each flex property does. You can then choose your own properties to align your items differently if need be.


I hope this is useful for you. If you have any questions, leave them below.

 

Note: This post originally appeared on ZenWebThemes.com, but I’ve since taken that website offline and moved some of the popular blog content over to this website.




Posted in Web Design, WordPress.