I’m a big fan of grid layout when it comes to modern design elements. Not only it looks aesthetic but it also allows your visitors to view more content above the fold. That’s why I prefer using grid loop in almost all my projects.
Bill Erickson has written a plugin for Genesis Grid and it’s very handy if you’re looking for a nifty plugin to display your blog posts in grid format. However, instead of using the plugin, you can simply use a few line of php codes in your functions.php and some css to achieve a grid view.
In fact, the code in this post belongs to Bill Erickson, but I’ve modified it slightly for my own projects.
Before we dive into the functions.php file, I must warn you that you shouldn’t try editing your functions.php file without using any FTP software.
Assuming you’re fully familiar with FTP client, let’s proceed with the tutorial.
Add the following code to your functions.php file.
That’s all. you should see your blog split into two or three column grid.
Note: The code above code will apply grid view to your blog home as well as category archives. Moreover, if you want to show three column grid, you need to replace one-half with one-third, and change current_post % 2 to current_post % 3.
This is just a basic guide on how to apply grid layout to your Genesis blog. If we change the location of the featured image and other surround elements such as post meta and post info, then it will look even better. However, let’s save that for a future post.
Please, let me know if you have any questions.
Demo: Here’s what the Genesis Sample Theme looks like after the above code is applied.
