Posts Grid in Genesis using CSS Grid

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.