This article will be about styling the Divi Gallery module. By default, the Divi Gallery has 4 columns on desktop and 1 column on mobile. But in this tutorial, we will make it have 5 columns on desktop and 2 on mobile.

We will achieve this by using some custom CSS code.

The first thing that you need to do is to create your gallery. Create a new Divi page, add a new section, row and add a Gallery module into it. Then add at least 10 images into your gallery (so that we have at least 2 rows of images).

Then add a custom CSS class col-width to your Gallery module.

And below is the code that you need to use if you want to have your gallery have 5 columns on desktop. You need to add this code either to the custom CSS filed of the general Divi theme options. Or you can add it just into the particular page’s custom CSS code field.

@media (min-width: 981px){
	.et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {
		clear: none; 
	}
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 20%;
	}
}
@media (max-width: 980px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 25%;
	}
}
@media (max-width: 479px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 50%;
	}
}

As you can see in the CSS code above, there is a code for every width of the screen. Desktop screens usually have more than 980 pixels, while mobiles have less than 480 pixels.

We also have there the code for tablets that will make the gallery to have 4 columns on these devices.

If you are interested in a more simple process of how to make your Divi gallery have 5 columns, regardless of the screen size, check out this other tutorial.

Lastly, if you want to have no spacing between the gallery images, go into your Row settings and enable the options “Make This Row Fullwidth”, “Use Custom Gutter Width” and set the gutter width to 1. This will make the gallery images to extend across the full width of your page and have no spacing between the gallery items.

Here you can see how a Divi gallery with these settings looks like on desktop (it has 5 columns):

And below you can see how it looks like on mobile (2 columns):

And you are done.