3 Column Blog Grid Layout w/ Equal Heights, Grow, and Custom Borders (Divi Tuts)

Here’s a great way to customize your blog page and category archives. In this tutorial, we show how to add the following:

1. Equalize blog rows
2. Three column grid layout
3. Grow class with shadow on hover
4. Featured image height crop on mobile devices
5. Widget title borders
6. Blog pagination borders

If you would like to start with the blog module and sidebar configured like they are in the video tutorial, you can download the .json file by clicking the button below. Then go to Divi Library under the Divi/Extra theme menu and import the file.

Once you have the blog page up and running, copy the Javascript below to equalize the blog rows. Add it to the Theme Options –> Integration –> Head text area. Then copy the CSS below and place it in the Theme Customizer under Additional CSS or in your child theme style.css file.

Once the blog page is complete, go to the Theme Builder under the Divi/Extra menu and create a new template. Click on the pencil icon in the body section and create a custom body area. Choose the column layout that matches the layout of the blog page. Add your sidebar in one column and the Blog module in another. In the settings for the blog, enable the “Posts for current page” option. In the advanced tab, add the following classes so that the design matches the blog page: trumani-blog et_blog_grid_equal_height. That’s it!

Javascript

Credit: Divi Sensei

/*Equalize Blog Columns*/

.bloggrid .et_pb_salvattore_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bloggrid article {
        margin-bottom: 20px !important;
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.bloggrid .post-content {
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.bloggrid .column {
        margin-bottom: 20px !important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

CSS

/*** Begin Blog Customizations ***/
/* 3 Column Grid */
.trumani-blog .et_pb_salvattore_content[data-columns]::before {
content: '3 .column.size-1of3' !important;
}
@media only screen and ( min-width: 981px ) {
.trumani-blog .column.size-1of3 {
width: 32% !important;
margin-right: 1%;
}
}

/* Hover Shadow & Grow */
.et_pb_post {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.et_pb_post:hover {
-webkit-transform: scale(1.01, 1.01);
transform: scale(1.01, 1.01);
box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
z-index: 1;
}
/* Shrink image on mobile */
.et_pb_image_container img {
max-height: 350px !important;
object-fit: cover !important;
}

/* Pagination border */
div.alignleft {
padding-right: 5px;
border-right: 2px solid #f06449;}
div.alignright {
padding-left: 5px;
border-left: 2px solid #f06449; }

/* Widget header */
h4.widgettitle {
display: flex;
align-items: center;
text-align: center;
}
h4.widgettitle::before, h4.widgettitle::after {
content: '';
flex: 1;
border-bottom: 2px solid #f06449;
}
h4.widgettitle::before {
margin-right: .25em;
}
h4.widgettitle::after {
margin-left: .25em;
}

/*** End Blog Customizations ***/