<https://wpzone.co/wordpress-and-divi-code-snippets/how-to-create-a-masonry-layout-with-divis-gallery-module/>

1. Add a new row with the gallery module.
2. Gallery set as grid and portrait.
3. Add the following to the row » custom css. Change the column numbers

as desired. As an alternative, you can add a custom class to the row, replace 'selector' in the below css with that class and add the css to the custom css in the Divi theme options.

selector .et_pb_gallery .et_pb_gallery_items {
column-count: 4; /* number of columns for desktop */
column-gap: 15px; /* column spacing */
}
@media only screen and (max-width: 1200px) {
selector .et_pb_gallery .et_pb_gallery_items {
column-count: 4; /* number of columns for tablet devices */
}
}
@media only screen and (max-width: 767px) {
selector .et_pb_gallery .et_pb_gallery_items {
column-count: 3; /* number of columns for mobile devices */
}
}
selector .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
width: 100%;
margin: 0px 0px 10px 0!important; /* replace 10px to change row
spacing */
float: none!important;
}
Code language: CSS (css)

If it doesn't work, add the following filter to functions.php

add_filter( 'et_pb_gallery_image_width', 'wpz_gallery_image_width'
);
add_filter( 'et_pb_gallery_image_height',
'wpz_gallery_image_height' );
function wpz_gallery_image_width() {
return '1080';
}
function wpz_gallery_image_height() {
return '9999';
}
Code language: JavaScript (javascript)