Search Divi Blog Extras Documentation

Search for answers or browse our knowledge base.

Table of Contents
< All Topics

How to change Grid Extended layout to 3 columns in Divi Blog Extras

To modify the Grid Extended layout in 3 columns in Divi Blog Extras, follow these steps:

  1. For Page-Specific Changes:
    • Paste the following code into the page settings, typically in the custom CSS area for that specific page.
  2. For Site-Wide Changes:
    • Navigate to the Divi Theme Options.
    • Go to the Custom CSS area.
    • Paste the same code into the Custom CSS box.

.el-dbe-blog-extra.grid_extended .et_pb_post_extra.el_dbe_grid_extended {
margin-right: 0 !important;
border-radius: 0;
margin-bottom: 0;

.el-dbe-blog-extra.grid_extended {
display: flex;
flex-wrap: wrap;

@media screen and (min-width: 981px) {
.el-dbe-blog-extra.grid_extended .et_pb_post_extra.el_dbe_grid_extended {
width: 32% !important;
margin-bottom: 20px;
margin-left: 0 !important;


.el-dbe-blog-extra.grid_extended .et_pb_post_extra.el_dbe_grid_extended:not(:nth-child(3n)) {
margin-right: 2% !important;

.el-dbe-blog-extra.grid_extended .et_pb_post_extra.el_dbe_grid_extended:nth-child(odd) .post-media {
order: 0 !important;