Mosaic Layout

The Mosaic layout in Robo Gallery allows you to build highly flexible and visually rich gallery designs by combining classic grid settings with individual image column configuration.

Unlike fully automated layouts, Mosaic gives you manual control over how each image occupies space inside the grid. This approach is perfect when you want to highlight specific images, create asymmetry, or design custom editorial-style galleries.

How Mosaic Layout Works#

Mosaic layout is based on two key configuration layers:

1. Global grid settings – define the base structure of the gallery
2. Per-image column settings – control how much space each image takes inside the grid

By combining these two layers, you can create virtually any layout, from subtle variations to complex magazine-style mosaics.

Step 1: Configure Grid Size Options#

The first step is configuring the gallery grid size.

You can find these options in:

Gallery Settings → Gallery Size Options

Available settings include:#

• Gallery Width (percentage or fixed width)
• Gallery Alignment (left, center, right)
• Padding (top, right, bottom, left)
• Responsive breakpoints
• Columns count per screen size

For example:

• Desktop: 8 columns
• Tablet: 3 columns
• Mobile: 1–2 columns

These values define the base grid into which images will be placed.

💡 Think of this as defining the “canvas” for your mosaic.

Step 2: Configure Image Columns in Media Manager#

Once the grid structure is defined, you can control how individual images behave inside that grid.

Open:

Gallery → Manage Images

For each image, you can set:

• Column span (how many grid columns the image occupies)
• Link
• Video
• Tags
• Hover effect

The Column field is the key parameter for Mosaic layouts.

Example#

If your grid has 8 columns:

• Image A → Column = 1 (small image)
• Image B → Column = 2 (medium image)
• Image C → Column = 4 (featured image)

This allows you to mix image sizes freely within the same row.

Combining Grid and Image Settings#

The real power of Mosaic layout comes from combining:

• Grid column count (global)
• Image column span (individual)

This gives you full freedom to:

• Highlight important images
• Create visual rhythm
• Break uniform grid patterns
• Design storytelling or portfolio layouts

There are no strict limitations — the final layout is entirely defined by how you combine these values.

Responsive Behavior#

Mosaic layouts are fully responsive.

When screen size changes:

• Grid column count adapts based on breakpoints
• Image column spans automatically recalculate
• Layout remains clean and readable on all devices

You can fine-tune behavior separately for:

• Desktop
• Tablet
• Mobile

When to Use Mosaic Layout#

Mosaic layout works best when:

• You want manual control over layout
• Some images need more visual emphasis
• You are creating portfolios, editorials, or landing pages
• You want a unique design that stands out from standard grids

Summary#

• Mosaic layout is built on the classic grid
• Layout is controlled by:
  • Grid size settings
  • Per-image column configuration
• Allows unlimited layout combinations
• Fully responsive and mobile-friendly
• Ideal for creative and custom gallery designs

By combining these settings, you can create absolutely any layout — from simple variations to complex, fully custom mosaics.

Next recommended articles:

• Grid Layout Settings
• Image Text & Metadata
• Layout Configuration – Masonry
• Image Optimization & Performance