Spacing, Margins & Padding

Robo Gallery provides flexible controls for managing spacing between images, outer margins, and inner padding of the gallery container. These settings help you fine-tune how galleries look and behave across different screen sizes.

This article covers spacing options for:

• Classic Grid layouts (up to version 3)
• Fusion Grid layouts (version 5)

Classic Grid (Gallery versions up to v3)#

In classic grid layouts, spacing is configured using a combination of gallery size options and thumbnail view options.

Gallery Width, Alignment, and Padding#

In the Gallery Size Options section, you can control:

• Width Set gallery width in percentages or pixels (e.g. 100% for full-width layouts).

• Gallery Alignment Align the gallery inside its container:

  • Left
  • Center
  • Right
  • Disabled (inherit theme layout)

• Padding Add internal spacing around the gallery:

  • Left
  • Right
  • Top
  • Bottom

Padding creates space between the gallery and surrounding content, without affecting image spacing inside the grid.

Spacing Between Thumbnails#

In the Thumbs View Options, you can configure how images are spaced and styled:

• Horizontal Space Controls spacing between images horizontally.

• Vertical Space Controls spacing between rows.

• Radius Adds rounded corners to thumbnails.

These options directly affect how dense or airy your grid layout appears.

Borders and Shadows#

Classic grid layouts also support visual spacing effects:

• Shadow Options

  • Horizontal offset
  • Vertical offset
  • Blur
  • Shadow color

• Border Options

  • Border width
  • Border style (solid, dashed, etc.)
  • Border color

Borders and shadows visually separate images and can act as an alternative to increasing spacing.

Fusion Grid (Gallery version 5)#

Fusion Grid introduces a modern layout engine with smarter spacing controls and better responsiveness.

Global Spacing Control#

In Fusion Grid layouts, spacing is handled mainly through the Spacing slider:

• Spacing
  • Controls the gap between images
  • Applies consistently across all screen sizes
  • Updates layout dynamically

This makes it easier to adjust spacing without manually recalculating margins or thumbnail sizes.

Auto Layout Adjustment#

Fusion Grid includes Auto Layout Adjustment, which automatically adapts spacing and layout based on screen size:

• Desktop
• Tablet
• Mobile

When enabled, Robo Gallery recalculates spacing and alignment to maintain a clean and balanced layout on all devices.

Row Height (Masonry & Justified Layouts)#

For Masonry and Justified layouts, you can also configure:

• Row Height
  • Defines the target height for image rows
  • Affects how images are resized and aligned
  • Works together with spacing to control overall density

Larger row heights result in fewer rows and larger images, while smaller values create denser grids.

Classic Grid vs Fusion Grid: Key Differences#

Best Practices#

• Use moderate spacing (8–15px) for most galleries.
• Avoid excessive spacing on mobile layouts.
• Combine spacing with borders or shadows, not both, to keep layouts clean.
• For responsive projects, prefer Fusion Grid layouts whenever possible.

Summary#

Spacing, margins, and padding play a crucial role in how your gallery looks and feels. Classic Grid layouts offer detailed manual controls, while Fusion Grid provides a smarter and more adaptive approach.

Choosing the right spacing strategy helps you:

• Improve visual clarity
• Enhance responsiveness
• Maintain consistent design across devices