The Melvin template, by default, renders the Gallery addon (SP Page Builder) in a 3-column grid layout. If a different column configuration—such as 4 or 6 columns—is required, it can be modified using custom CSS.

The default grid layout is controlled purely through CSS, allowing for easy customization. Below is the default CSS used to define the 3-column layout:

ul.sppb-gallery li {
    padding: 0 15px;
    width: 33.33%;
    margin-bottom: 30px;
}

As seen in the image below, the Gallery Addon is limited to 3 columns.

The gallery layout is easily adjustable using custom CSS. You can modify the number of columns by updating a few CSS properties. Additionally, the spacing between thumbnail images can be reduced by overriding specific margin or padding values.

To apply these changes, simply override the relevant CSS in your custom stylesheet:

ul.sppb-gallery li {
    padding: 0 3px;
    width: 24.3%;
    margin-bottom: 6px;
}

Custom CSS can be added via System > Site Template Styles > shaper_melvin – Default > Custom Code tab in the Helix3 Custom CSS field, or by placing it in the template’s custom.css file.