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

WP SITES

2672

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Contact
  • Tags
  • Log in

Premium Member? - Request custom code

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

Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Brad Dalton Specializes In Genesis child theme customization & code modification. Read More…

Learn PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems