How to Configure Gallery Columns and Spacing

WP Social Media Gallery lets you set columns, spacing, and row height per device breakpoint — desktop, laptop, tablet, and mobile. You find these controls in the Configuration step under the Style sub-menu. Settings here override the global defaults for this gallery only.

Before You Start

Open the gallery you want to edit in the Gallery Builder and go to Configuration > Style.

• A saved gallery open in the Gallery Builder.
• The gallery type set to Gallery (WP Media).

Set Columns and Spacing

The Columns slider goes from 1 to 12. The Spacing slider goes from 0 to 100 pixels. Both settings are per-device, so you can show 5 columns on desktop and 1 on mobile.

1. Select a device from the device bar: Desktop, Laptop, Tablet, or Mobile.
2. Drag the Columns slider to set the number of columns for that device.
3. Drag the Spacing slider to set the gap between images in pixels.

Default values are 5 columns and 10px spacing on desktop, 3 columns on laptop, 2 on tablet, and 1 on mobile. You can reset any slider to its default by clicking the reset icon.

Adjust Row Height and Alignment

Row Height sets the height of each row in the masonry and mosaic layouts. Choose a value between 100 and 600 pixels, or set it to auto to let images define their own row height. Row Alignment controls how images align within each row: left, center, or right.

1. Drag the Row Height slider or type a value. Choose auto from the unit dropdown for automatic height.
2. Open the Row Alignment dropdown and pick left, center, or right.

Row height has no effect on the grid layout, where all cells are the same size regardless of this setting.

Set Border and Radius

You can add a border around each image and round the corners. Border Style accepts none, solid, dashed, or dotted. Border Width goes from 1 to 10 pixels. Border Color opens a color picker with a reset button.

1. Open the Border Style dropdown and pick solid, dashed, dotted, or none.
2. Drag the Border Width slider to set thickness.
3. Click the Border Color picker to choose a color, or click the reset icon to return to the default.

Radius rounds the corners of each image cell. Set it to 0 for sharp corners or increase it for softer edges. The maximum is 100 pixels.

What to Check

Preview the gallery after adjusting columns and spacing to confirm the result matches your expectation.

• Columns, spacing, and row height look correct on the device you targeted.
• Switching devices in the preview shows the correct breakpoint settings.
• Borders and radius apply evenly across all images.

Troubleshooting

If the spacing or columns do not look right, check the following.

• Spacing looks too wide: Reduce the spacing slider value. Remember that spacing adds to both sides of each image, so a 20px spacing value creates a 40px gap between image centers.
• Row height ignored: Row height only affects masonry and mosaic layouts. Switch to one of those layouts to see the effect.
• Borders not visible: Confirm the border style is not set to none and the border width is greater than 0.

Next Steps

With columns and spacing set, add images from your media library if you have not already. Learn how to add images from the media library to populate your gallery.