Advanced Post Page Blog layout in Grid using CSS Grid in Genesis

This tutorial provides the steps to design Post page layout in Grid having different layouts for multiple posts list using CSS.

The tutorial will be updated with more customizations.

The idea:

We are going to target the post page i.e blog by using the default CSS class .home which is added in the <body> by default in WordPress.

Pagination will be treated as the additional line if the site layout is CONTENT+SIDEBAR.

We can reposition the pagination on the post page which could be useful for FULL-WIDTH CONTENT.

1. Settings > Reading. Make sure to limit the number of posts is 6 or more depending on the type of customization.

2. Genesis > Theme Settings > Content Archives. We will set it to show Post Excerpts and set the featured image in the center.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.