# Media mosaic

The media mosaic section displays images in a flexible, collage-style grid layout. It is designed to create visually dynamic compositions for storytelling, product showcases, or editorial content, allowing varied image sizing and placement within a structured grid.

<figure><img src="/files/wKVb6uk4fzF6KaYRT3gv" alt=""><figcaption></figcaption></figure>

#### Show header

Controls the visibility of the section header above the mosaic. When enabled, the heading and subheading are displayed if set.

#### Direction

Defines the layout direction on desktop. Set to “Column” to stack content vertically; mobile always uses a column layout for usability.

#### Heading

The main heading displayed for the section. Default is “Media mosaic”. Leave blank to omit.

#### Subheading

Optional supporting text shown below the heading to provide context or description for the mosaic content. Leave blank to omit.

#### Button label

Defines the text for an optional call-to-action button. Leave blank to hide the button.

#### Button link

Specifies the URL destination for the button. Can link to a page, collection, or external URL. Leave blank to omit.

#### Button style

Defines the visual style of the button. Default is “Secondary”.

#### Grid columns (desktop)

Sets the number of columns used to structure the mosaic layout on desktop. Default is 5, allowing for flexible image arrangements.

#### Row height (desktop)

Defines the height of each row in the mosaic grid on desktop. Default is 50, controlling the overall density and visual balance.

#### Grid columns (mobile)

Sets the number of columns used on mobile devices. Default is 2 for improved readability and layout control.

#### Row height (mobile)

Defines the height of each row in the mosaic grid on mobile devices. Default is 50, ensuring consistent scaling across devices.

#### Disable rounded media

Removes rounded corners from media items, resulting in a sharper, edge-to-edge visual presentation.

#### Maximum width

Controls the horizontal width of the section. Set to “Fill space” to allow the mosaic to span the full available container width.

#### Vertical spacing

Controls the spacing around the section to adjust its separation from surrounding content.

#### Vertical spacing (desktop)

Sets the vertical spacing applied on desktop devices. Default is Large.

#### Vertical spacing (mobile)

Sets the vertical spacing applied on mobile devices to ensure consistent spacing across screen sizes.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gatame.gitbook.io/highstreet/dynamic-sections/editorial/media-mosaic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.