How to Choose a Gallery Layout

WP Social Media Gallery offers four free layouts — automatic, grid, masonry, and mosaic — and additional Pro layouts. You pick a layout in the Configuration step of the Gallery Builder, and you can set different layouts for desktop, laptop, tablet, and mobile. The layout you choose here does not change the shortcode or block attributes.

Before You Start

Open the gallery you want to edit in the Gallery Builder. If you have not created a gallery yet, follow the guide to create your first gallery first.

• A saved gallery open in the Gallery Builder.
• Images already added to the Source step.

Open the Configuration Step

1. Go to WP Social Media Gallery > Gallery Builder.
2. Open the gallery you want to edit.
3. Click Configuration in the builder stepper.

The Configuration step has four sub-menus: Settings, Style, Lazy Load, and Animation. Layout and spacing live under Style.

Choose a Layout

Under View Style, pick the layout that fits your content.

• Automatic: The plugin selects the best layout for the source type.
• Grid: Equal-sized cells. Best for uniform images such as product photos.
• Masonry: Staggered rows that pack images tightly. Best for mixed aspect ratios.
• Mosaic: Variable-width tiles. Best for editorial layouts where some images deserve more space.

Pro layouts — hover reveal, polaroid, square, blogroll, bento box, and more — appear alongside the free layouts when a Pro license is active.

Set Device-Specific Options

Click the device buttons — Desktop, Laptop, Tablet, Mobile — to set columns, spacing, and row height for each breakpoint. The gallery applies the matching settings automatically on the front end.

1. Select a device from the device bar at the top of the Style panel.
2. Set Row Height between 100 and 600 pixels, or choose auto.
3. Set Row Alignment to left, center, or right.
4. Set Columns from 1 to 12.
5. Set Spacing from 0 to 100 pixels.
6. Set Radius from 0 to 100 pixels for rounded corners.

Default columns per device are 5 for desktop, 3 for laptop, 2 for tablet, and 1 for mobile.

What to Check

Confirm the layout looks correct before saving.

• The chosen layout matches your content type — grid for uniform images, masonry for mixed ratios.
• Columns, spacing, and row height are set for all devices you care about.
• The preview in the builder matches what you expect on the front end.

Troubleshooting

If the layout does not look right, check the following.

• Masonry looks like grid: Masonry requires mixed image heights. If all images are the same height, masonry collapses to a grid-like appearance. Add images with different aspect ratios to see the staggered effect.
• Mosaic tiles are all the same width: Mosaic assigns tile widths based on image aspect ratio. If all images share the same ratio, the mosaic collapses. Use a mix of landscape, portrait, and square images.
• Pro layout is locked: Hover reveal, polaroid, and the other advanced layouts require a Pro license. The free version includes automatic, grid, masonry, and mosaic only.

Next Steps

With the layout chosen, fine-tune the spacing and border style for each device. Learn how to configure gallery columns and spacing to polish the look.