How to change Grid Extended layout to 3 columns with image on top in Divi Blog Extras

To modify the Grid Extended layout in 3 columns with the image on top 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: block !important;
}

.et_pb_post_extra.el_dbe_grid_extended .post-content {
padding: 30px 0 0 !important;
width: 100% !important;
}

.et_pb_post_extra.el_dbe_grid_extended .post-media {
width: 100% !important;
}

@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;
float: left;

}

.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;
}
}