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.
Step 2 – Copy & paste the CSS from the style.css file to your child themes style.css file and clear caching.
Demo Video
Shows posts displayed in 3 columns on all paginated pages and displaying in a single column on smaller screens.
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.
CSS grid does not work using I.E and won’t be included in MS Edge until the 17th of this month.
Using google chrome
What you can do rather than use CSS is use PHP code instead.
sorry for the multiple post…something crazy happening on this end
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.
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
It works. Your posts are displaying in columns. make sure you clear all types of caching.
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.
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.
You shouldn’t need to do that unless you have added additional CSS which effects your blog page. Link to your blog page please.
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.
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
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.
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
Send me login details please and link to the blog page.
I apologize for delayed response. I’ve been pulled away for the past week.
http://koinoniabuilders.com/blog/
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.