How to change the number of columns in the Divi blog grid

The Divi blog module has a full width setting and a grid setting. The grid has 3 columns by default. Sometime we want this to be 2 or even 4. It’s a pretty quick fix with a little CSS added to the row and the Divi CSS settings.

There is a great article on this here.

For Two Columns

Add cu-blog to the row CSS Class and add the folllowing to the Divi CSS area

/* 2 COL BLOG GRID */

.cu-blog .et_pb_salvattore_content[data-columns]::before { content: ‘2 .column.size-1of2’ !important;}@media only screen and ( min-width: 981px ) { .cu-blog .column.size-1of2 {    width: 46%!important;    margin-right: 2%;margin-left: 2%; }}

For Four Columns

Add cu-blog to the row CSS Class and add the folllowing to the Divi CSS area

/* 4 COL BLOG GRID */

.cu-blog .et_pb_salvattore_content[data-columns]::before { content: ‘4 .column.size-1of4’ !important;}@media only screen and ( min-width: 981px ) { .cu-blog .column.size-1of4 {    width: 24%!important;    margin-right: 1%; }}

We used a custom blog grid on the following sites:

Kellylin Couture