Posted on Saturday, July 16th, 2016 No Comments
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:
Before you get started, you might want to open these resources and have them on hand:
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:
This is how the concept works:
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.
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.
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.