Created 3 Columns Grid Layout for Blog Page in 5 mins – Whitespace PRO theme


Using Genesis Featured Posts Combo plugin and Genesis Widget Areas Generator plugin I created this 3 columns grid layout for my blog posts. It took 5 mins.

Step 1: Created a widget area using Genesis Widget Areas Generator plugin. Navigate to Widget Generator > Add New and created this one

Add New Widget Area for Blog Page
Add New Widget Area for Blog Page

Step 2: Drag&Drop the Genesis Featured Post Combo widget in “Grid Layout for Blog Page” widget area and setup the widget.

Step 3: Created a Blog page and assigned the “Grid Layout for Blog Page” widget area for that page. Also I entered this “grid-layout” in custom body class text field.


Step 4: Added this small css in style.css file

/* # 3 Columns Grid layout for Blog Page
------------------------------------------------------------ */
.grid-layout .page.entry {
  padding: 100px 0 0;

.grid-view-blog, .grid-layout .page .entry-header {
    padding: 0 40px;

#grid-view-blog .entry-header > h2.entry-title {
  font-size: 36px;

Share This Article

C. Paul

Creating Genesis Framework related themes, plugins, articles and troubleshooting the issues. Also I am doing the freelance work for clients.

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

3 Discussion to This Post

    • Genesis Developer says

      Thank you for purchasing my plugin. Are you wanting to display the single post from every category and tag? There have taxonomy drop down. Select “category” and all categories will be listed in 2nd drop down. Choose your category and post will display from that selected category. This process is same for tag also.

  1. Ginger Coolidge (@gscoolidge) says

    Thank you for this post, I love the grid layout of the White Space homepage. I want to incorporate it into my custom site for myself I will be working on and this helps.

Leave A Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.