Responsive Layout Tips

Robo Gallery is designed with responsiveness in mind from the very beginning. Both the classic grid (versions up to v3) and the Fusion Grid (v5) automatically adapt galleries to different screen sizes — from small mobile devices to large desktop and ultra-wide displays.

That said, there are a few important configuration tips that will help you get the best visual result and performance on all devices.

Responsive behavior in Classic Grid (v3)#

In Robo Gallery versions up to v3, responsiveness is handled through manual breakpoint configuration.

Key principles#

• The gallery layout adapts based on predefined screen widths.
• For each breakpoint, you can configure:
  • Thumbnail size
  • Number of columns
• This gives you full control, but requires more manual setup.

Recommended setup#

• Use fewer columns on smaller screens:
  • Desktop: 4–6 columns
  • Tablet: 2–3 columns
  • Mobile: 1 column
• Keep thumbnail sizes reasonable (200–300px) to avoid heavy image downloads on mobile networks.
• Avoid fixed widths where possible — use percentage-based widths for better flexibility.

This approach works well, but requires careful tuning if your gallery is used in multiple places across the site.

Fusion Grid (v5): Responsive by design#

Starting from version 5, Robo Gallery introduced the Fusion Grid, which uses modern layout techniques and a much higher level of automation.

What’s different in Fusion Grid#

• Automatic layout adjustment based on:
  • Container width
  • Screen resolution
  • Device type
• No need to manually configure breakpoints in most cases.
• Supports:
  • Mobile phones
  • Tablets
  • Laptops
  • Ultra-wide and high-resolution displays (Ultra HD, Retina, up to 16K)

You define desired layout preferences, and the grid takes care of the rest.

Auto Layout Adjustment (Fusion Grid)#

The most important option for responsiveness in Fusion Grid is:

Auto Layout Adjustment → Enable

When enabled:

• The gallery automatically recalculates:
  • Column count
  • Item sizes
  • Spacing
• The same gallery looks good on all devices without additional configuration.

💡 Recommendation: Always keep Auto Layout Adjustment enabled unless you have a very specific design requirement.

Columns count: Auto vs Manual#

Fusion Grid allows you to control columns in two ways:

Auto (recommended)#

• The grid automatically selects the optimal number of columns.
• Best for:
  • Responsive layouts
  • Content blocks
  • Pages with dynamic width

Manual columns#

• You define an exact number of columns.
• Useful when:
  • You need strict visual consistency
  • The gallery is placed in a fixed-width container

For most use cases, Auto mode delivers the best responsive result.

Spacing and Row Height considerations#

To keep your gallery responsive and visually balanced:

• Use moderate spacing values (8–15px)
• Avoid extremely large row heights on mobile devices
• Let Fusion Grid recalculate row height dynamically when possible

Large spacing + many columns may look fine on desktop but can feel cramped on smaller screens.

Width and container awareness#

Fusion Grid is container-aware, not just screen-aware.

Best practices:

• Use Width: 100% for galleries inside content areas
• Enable Auto Width
• Avoid fixed pixel widths unless absolutely necessary

This ensures the gallery adapts correctly inside:

• Page builders
• Columns
• Widgets
• Sidebars

Performance tips for responsive layouts#

Responsiveness is not only about layout — performance matters too:

• Use appropriate thumbnail sizes
• Avoid loading full-size images for grid views
• Let Robo Gallery handle:
  • Lazy loading
  • Caching
  • Optimized rendering

A fast gallery always feels more responsive.

Summary#

• Classic Grid (v3) Manual control, breakpoint-based responsiveness.

• Fusion Grid (v5) Modern, automated, container-aware, and highly responsive.

For new galleries, Fusion Grid is the recommended choice — it requires less configuration, adapts better to real-world layouts, and scales perfectly from mobile screens to ultra-wide displays.