• 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

CSS Grid For Genesis Archives

This CSS enables you to display archive entries in columns without editing any existing code. All you need to do is copy & paste the CSS to the end of your child themes style sheet and clear caching.

Tested using the latest Genesis Sample child theme by StudioPress, this is one example of what the CSS enables you to do with each post in any archive page type :

Before : Single Column
After : Two Columns

Demo Video

Shows the first post displaying full width and every other posts displaying in columns unless its the last post which also displays full width only when a odd number of posts are set on the Read settings.

Also shows each post displaying full width when the screen size is less than 960px.

This solution also enables you to :

  • Display the last entry 100% width when using a odd number of entries removing any gaps.
  • Display entries in any number of columns at any screen width.
  • Display the archive pagination full width when using a odd number of posts
  • Position and style each post in the grid.

Here’s the CSS :

Register for full access

Related Tutorials

  • Display Posts In Columns On Genesis Archive Pages
  • Blog Template To Show Latest Post On Top of Entries In 2 Columns

CSS Grid Columns

Reader Interactions

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.