Masonry Layout

The Masonry Layout in Robo Gallery (Fusion Grid, v5) is designed to display images in a dynamic, fluid grid where items are arranged vertically or horizontally based on their natural proportions. This layout is ideal for galleries with images of different aspect ratios and creates a modern, visually balanced appearance.

Fusion Masonry layouts are fully responsive, optimized for performance, and automatically adapt to different screen sizes — from mobile devices to ultra-wide and Retina displays.

Available Masonry Layout Types#

Fusion Grid supports two Masonry layout variations:

Horizontal Masonry#

In Horizontal Masonry, images are organized in rows with flexible widths. Each row adjusts dynamically to fill the available space while maintaining image proportions.

Best for:

• Photography portfolios
• Editorial and blog-style galleries
• Wide images with mixed orientations

Vertical Masonry#

In Vertical Masonry, images are stacked in columns with flexible heights. The layout flows vertically and fills gaps automatically.

Best for:

• Pinterest-style galleries
• Image collections with varied heights
• Creative and design showcases

You can switch between these layouts at any time in the gallery settings.

Auto Layout Adjustment#

Auto Layout Adjustment enables Robo Gallery to automatically adapt the Masonry layout based on the visitor’s device.

When enabled:

• The gallery automatically recalculates columns and spacing
• Mobile, tablet, and desktop views are optimized without manual configuration
• Layout remains visually balanced on all screen sizes

This option is strongly recommended for most use cases.

Columns Count#

The Columns Count setting controls how many columns are displayed in the Masonry layout.

Options include:

• Auto – Robo Gallery calculates the optimal number of columns automatically
• Manual values – from a small number of columns up to large multi-column layouts

Using Auto ensures the best responsiveness, especially for mixed screen resolutions.

Spacing Between Images#

The Spacing option defines the gap between images in the Masonry layout.

• Smaller values create a compact, dense gallery
• Larger values create a more airy, minimalist appearance

Spacing is applied consistently across all devices.

Row Height (Horizontal Masonry)#

For Horizontal Masonry, the Row Height setting defines the target height for each row.

• Images are resized proportionally
• Rows automatically adapt to maintain a clean layout
• Helps control the overall visual rhythm of the gallery

This option is not used in Vertical Masonry.

Loading Bar#

Fusion Masonry layouts include a built-in Loading Bar, which visually indicates image loading progress.

Loading Bar Color#

You can customize the color to match your website’s branding.

Loading Bar Height#

Defines the thickness of the loading bar in pixels.

The loading bar improves user experience, especially for galleries with a large number of images.

Performance & Responsiveness#

Fusion Masonry layouts are built with modern frontend technologies and include:

• Optimized image loading
• Lazy loading and smart preloading
• Internal caching mechanisms
• Minimal and optimized CSS and JavaScript output

The layout automatically scales from small mobile screens up to Ultra HD and 16K displays, fully Retina-compatible.

When to Use Masonry Layouts#

Masonry layouts are recommended when:

• Images have different aspect ratios
• You want a dynamic, modern gallery appearance
• Automatic layout adaptation is important
• The gallery contains a large number of images

Fusion Masonry layouts require minimal manual configuration while delivering maximum flexibility and visual quality.