How to Style Your Divi Blog Page into Two-Column Grid Layout

How to Style Your Divi Blog Page into Two-Column Grid Layout

Add a Standard Section and insert a fullwidth column.

Click to edit the Section Settings and, under General Settings, change the following:

Under Custom CSS add the following:

CSS Class: tr_two_col

 

Save & Exit

Implementing the Two-Column Grid Layout

By default, the blog grid has a three-columnn grid layout. To change this to a two-column layout, go to Divi → Theme Options and add the following CSS in the Custom CSS box:

@media only screen and ( min-width: 980px ) {
.tr_two_col .et_pb_column .et_pb_salvattore_content[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.tr_two_col .et_pb_column .column.size-1of2 {
width:47% !important;
margin-right:6%;
}}
@media only screen and ( max-width: 980px ) {
.tr_two_col .et_pb_column .et_pb_salvattore_content[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.tr_two_col .et_pb_column .column.size-1of2 {
width:100% !important;
margin-right:0%;
}
}

 

Now your grid should be two columns for any screen size bigger than 980px. For screens less than 980px the grid will change to a single column.

3 thoughts on “How to Style Your Divi Blog Page into Two-Column Grid Layout”

  1. Thank you for this tutorial! Unfortunately it’s not working like it’s supposed to with me. The total width of 47% and 6% makes the second column get under the first. When I change the margin to 3% they do stay in one row, but there still is a margin on the right side. I hope you can help me out?

    Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top