Custom Column Settings

Custom Column Settings allow you to precisely control how many columns are displayed in a gallery depending on screen size. This feature gives you full flexibility to create responsive layouts that look perfect on desktops, tablets, and mobile devices.

Instead of relying only on automatic calculations, you can explicitly define column behavior for different breakpoints.

Where to Find Custom Column Settings#

Custom column configuration is available in:

Gallery Settings → Gallery Size Options → Size Options

Here you can define how the gallery behaves across multiple screen resolutions.

How Custom Columns Work#

For each screen resolution, you can configure:

• Auto Size – enables automatic column calculation
• Custom Size (px) – defines the thumbnail width
• Columns Count – sets the exact number of columns

Supported breakpoints include:

• Default (large screens)
• 960px
• 650px
• 450px

Each breakpoint can be configured independently.

Auto Size vs Custom Columns#

Auto Size Enabled#

When Auto Size is enabled:

• Robo Gallery automatically calculates the optimal number of columns
• Layout adapts dynamically to container width
• Recommended for most use cases

This is the easiest way to achieve a responsive gallery without manual tuning.

Auto Size Disabled (Custom Columns)#

When Auto Size is disabled:

• You manually define:
  • Thumbnail width (in pixels)
  • Exact number of columns
• Gallery layout becomes fully predictable

This mode is ideal when you need strict control over layout proportions or design consistency.

Columns Count Configuration#

The Columns Count field allows you to specify how many images appear in one row for each screen size.

Example configuration:

• Desktop (Default): 3–4 columns
• Tablet (960px): 3 columns
• Mobile landscape (650px): 2 columns
• Mobile portrait (450px): 1 column

This ensures optimal readability and usability across devices.

Practical Use Cases#

Custom Column Settings are especially useful for:

• Portfolio galleries
• Product showcases
• Editorial layouts
• Mosaic-style galleries
• Image-heavy landing pages

By adjusting columns per breakpoint, you can balance image size, performance, and visual clarity.

Interaction with Image-Level Columns#

In some gallery types (such as Mosaic layouts), column settings can also be influenced by:

• Individual image column settings in the Media Manager
• Combined use of gallery-level and image-level columns

This enables highly custom and creative layouts.

Performance Considerations#

Proper column configuration helps:

• Reduce excessive image scaling
• Improve perceived loading speed
• Optimize layout stability (CLS)
• Enhance mobile user experience

Robo Gallery applies optimized CSS and JS logic to ensure column changes do not affect performance.

Best Practices#

• Use Auto Size for most responsive layouts
• Manually define columns only when necessary
• Always test layouts on mobile devices
• Avoid too many columns on small screens
• Combine with optimized image sizes for best results

Summary#

Custom Column Settings give you full control over how your gallery adapts to different screen sizes. Whether you prefer automated responsiveness or precise manual control, Robo Gallery provides the flexibility needed for modern layouts.

Used correctly, this feature helps create clean, fast, and visually balanced galleries on any device.