• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Blog Page Grid In Genesis

The solution in this tutorial shows you how to display the posts on your blog page ( When using the full width layout ), or any other type of archive, in columns using CSS Grid like this :

The tutorial has been written based on the following question from a member of the Genesis community :

Question about layout of the blog page. Do anyone here know how to make a grid/column styled blog page in the show case pro theme? Guess I need to make changes in the code, but don’t know how. Thanks!

#Installation

There’s 2 simple steps :

Step 1 – In your child themes root directory, create a file named page_blog.php and add the following PHP code to the file.

Note : You can use this template on any archive page type by naming the file according to the WordPress Template Hierarchy and customize further using the code in this tutorial.

Step 2 – Copy & paste the CSS from the style.css file to your child themes style.css file and clear caching.

Click here to access free tutorials

Demo Video

Shows posts displayed in 3 columns on all paginated pages and displaying in a single column on smaller screens.

Related Tutorials

  • Genesis Blog Posts Template – Fully Customizable
  • Genesis Blog Page Template In Columns
  • CSS Grid For Genesis Archives
  • Genesis Archives In Columns
  • Display Posts In Columns On Genesis Archive Pages
  • Blog Page Grid In Genesis

Blog Page CSS Grid Columns

Reader Interactions

Comments

  1. jdfrazier says

    October 11, 2017 at 8:43 am

    Thought this may be of interest to you…I do use google chrome so caching is an issue, but I cleared all caching…I cleared everything. On my laptop, the blog displays like the original default blog, but when I plug my laptop into a larger monitor using HDMI the blog will change to the Grid format it should be in…on both the laptop and the larger monitor.

    Log in to Reply
    • Brad Dalton says

      October 11, 2017 at 9:31 am

      CSS grid does not work using I.E and won’t be included in MS Edge until the 17th of this month.

      Log in to Reply
      • jdfrazier says

        October 11, 2017 at 4:08 pm

        Using google chrome

        Log in to Reply
        • Brad Dalton says

          October 11, 2017 at 8:44 pm

          What you can do rather than use CSS is use PHP code instead.

          Log in to Reply
  2. jdfrazier says

    October 10, 2017 at 6:33 pm

    sorry for the multiple post…something crazy happening on this end

    Log in to Reply
  3. jdfrazier says

    October 10, 2017 at 6:27 pm

    I made the mistake of not double-checking that the blog_page.php was uploaded…it is now, the css is added to the style.css, the caching has been cleared. I’ve selected “Blog Grid” in the template, but the blog page is still displaying like the original default blog instead of the grid format.

    Log in to Reply
  4. jdfrazier says

    October 9, 2017 at 5:15 pm

    Made the silly mistake of not double checking that the new php file was uploaded. However, I have everything in there now, cleared my caching and it is still displaying like the default blog….grid blog is selected. I have 8 blog posts with content.

    thanks

    Log in to Reply
    • Brad Dalton says

      October 9, 2017 at 8:32 pm

      It works. Your posts are displaying in columns. make sure you clear all types of caching.

      Log in to Reply
  5. G.Aloe says

    October 7, 2017 at 6:37 pm

    Hi, I just inform you that I tested it just now using the Genesis Sample Theme. I tested it for 2 and 3 columns only. Just following your CSS.

    It works very well for the First Page of the Blog Template Page. But when you move in the Second Page, it works BUT the width of every column is not a fraction of the full width. But it is just the full width. So, 2 or 3 columns for the page 2 and maybe also for the other pages, are oversized in width.

    I am still looking for the cause of this in the CSS hierarchy.

    Do you have any idea about why this happens?

    Thank you.

    Log in to Reply
    • G.Aloe says

      October 7, 2017 at 6:43 pm

      I have made another test.

      Instead of
      grid-template-columns: 1fr 1fr;

      Using
      grid-template-columns: 49% 49%;

      it works in all the pages 1, 2, 3, etc.

      Log in to Reply
      • Brad Dalton says

        October 7, 2017 at 8:34 pm

        You shouldn’t need to do that unless you have added additional CSS which effects your blog page. Link to your blog page please.

        Log in to Reply
    • Brad Dalton says

      October 7, 2017 at 8:33 pm

      Link to your blog page please. You must have CSS which is causing you a problem. Based on the demo video and thorough testing, the grid columns are perfectly even on all paginated pages of the archive.

      Log in to Reply
      • G.Aloe says

        October 8, 2017 at 5:08 am

        Hi, today, I tried again, using :

        grid-template-columns: 1fr 1fr;

        cleaning the cache and all the other things.
        Today it works.

        I have not idea why last night it didn’t work. I tested it many times, cleaning cache etc,

        The test that I do is made using ONLY the Genesis Sample Theme. No other external CSS is loaded.

        I see that you changed the code, to use a different class.

        I am working to upgrade my website girolamoaloe.com from the Woocommerce Canvas to Genesis. I realized that I am skilled enough to use all the hooks as genesis use them.

        I am testing genesis in this url: a.girolamoaloe.com

        I had the doubt only about how to make the archive pages (blogs/tags/categories/archive) in 2 columns.

        I have to say that I never used:
        grid-template-columns, grid-gap, grid-columns.

        I even didn’t know they existed.

        The using of your simple solution to make columns on the blog page or in every archive page is really great.

        I see also that the CSS code works very well with and without the sidebar because it uses the class .content

        I am always happy to learn something new 🙂

        Thank you very much.

        G. Aloe

        Log in to Reply
        • Brad Dalton says

          October 8, 2017 at 5:30 am

          Thanks for the feedback G. Aloe.

          Please note that CSS Grid columns are not supported in I.E unless you use vendor prefixes and won’t be supported in MS Edge until version 16 is released on the 17th October this year.

          Log in to Reply
  6. jdfrazier says

    October 2, 2017 at 12:37 pm

    I added the CSS above to my child theme’s (Altitude Pro) style.css file. Uploaded the file, confirmed that correct style.css file was part of activated theme. When I create the blog page, confirm selection of full width content layout and select “Blog” from the the Template dropdown menu, the page created is still the default blog page of the Altitude Pro child them. Any guidance?

    thank you

    Log in to Reply
    • Brad Dalton says

      October 2, 2017 at 7:53 pm

      Send me login details please and link to the blog page.

      Log in to Reply
      • jdfrazier says

        October 9, 2017 at 9:45 am

        I apologize for delayed response. I’ve been pulled away for the past week.

        http://koinoniabuilders.com/blog/

        Log in to Reply
    • Brad Dalton says

      October 9, 2017 at 10:18 am

      It uses the default blog page template and looks fine to me however you haven’t added any content to the single posts. I have updated the tutorial with another method which includes a custom page_blog.php file however it produces exactly the same result.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.