• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Posts Grid in Genesis using CSS Grid

Last Updated on February 19, 2019 Favorited: 0 times

This tutorial provides the steps to create different types of Post Grid layout using CSS Grid in Genesis framework.

The tutorial can be easily implement on any theme with a similar Post page layout structure.

Full-width content is generally not full width. Use something like this. (Not required)

@media only screen and (min-width: 960px) {
.full-width-content .content {
    width: 100%;
    padding: 10px 50px 40px 50px;
}

}

Make sure you have Number of Posts are set in the Settings > Reading.

1. Type 1

The default 2 column Grid. Use following CSS.

.content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}


.pagination {
    grid-column: 1 / -1;
}

Remember:- Add media queries to make sure it only works on desktop view and show full width on mobile view.

@media only screen and (min-width: 768px) {
.blog .content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}
}

2. Type 2

First full-width and 2 column Post.

.blog .content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}

.blog .content article:nth-child(-n+1) {
   grid-column: 1 / -1;
}

.blog .pagination {
    grid-column: 1 / -1;
}

Remember: Add media queries to make sure it only works on desktop view and show full width on mobile view.

@media only screen and (min-width: 768px) {
.blog .content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}
.blog .content article:nth-child(-n+1) {
   grid-column: 1 / -1;
}

}

Type 3

.blog .content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}

.blog .content article:nth-child(-n+1) {
   grid-column: 1 / -1;
}

.blog .content article:nth-child(4) {
   grid-column: 1 / -1;
}


.blog .content .pagination {
   display: block !important;
   background: black;
   grid-column: 1 / -1;
}


.blog .content article:nth-child(4) .entry-content img {
    float:  left;
    width: 300px;
    margin-right: 20px;
    display:  table;
}
@media only screen and (min-width: 768px) {

.blog .content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
}

.blog .content article:nth-child(-n+1) {
   grid-column: 1 / -1;
}

.blog .content article:nth-child(4) {
   grid-column: 1 / -1;
}


.blog .content .pagination {
   display: block !important;
   background: black;
   grid-column: 1 / -1;
}


.blog .content article:nth-child(4) .entry-content img {
    float:  left;
    width: 300px;
    margin-right: 20px;
    display:  table;
}

}

 

The tutorial required minor CSS changes based on the number of posts you want to show.

The CSS includes the condition .blog to show only on post page.

You should reposition the pagination if you using full-width layout for blog posts. I recommend you to do this to make sure the Grid is applied to only .content article {} as the CSS includes an additional class to make the pagination full.

The in-depth guide and more customizations coming soon.

Related Posts

  • Featured Post Widgets in Columns
  • Copyblogger style Post Grid Layout in Genesis
  • Isotope Masonry Blog Archive in Genesis
  • Magazine style featured posts design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis

Categories: Free Content, Genesis Tutorials Tags: blog, CSS Grid, layout, post page

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service