> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/layout/masonry.md).

# Masonry

An asymmetric grid of **Item** blocks that keeps each tile's natural height, so tiles of different sizes pack together. Optionally cap the height and reveal the rest behind a show-more button.

## Settings

| Setting                          | Description                                                                                                                                         |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Desktop columns / Mobile columns | Number of columns — 2–6 on desktop, 1–2 on mobile.                                                                                                  |
| Custom columns                   | Set the column count per breakpoint yourself, via **Columns per breakpoint**.                                                                       |
| Height limit                     | Caps the grid height — No limit, Small, Medium, or Large — with a separate mobile value. Anything beyond the cap is revealed by a show-more button. |
| Show more button style           | Primary, Secondary, Outline, Subtle, or Text.                                                                                                       |
| Gap — Horizontal / Vertical      | Spacing between tiles, with independent mobile values.                                                                                              |
| Desktop width                    | **Fill** the container, or a **Custom** percentage.                                                                                                 |
| Padding                          | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**.                                                              |

## Available blocks

### Item

A single masonry tile, holding its own nested blocks.

#### Item Settings

| Setting    | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------ |
| Alignment  | Horizontal alignment of the tile's content.                                                |
| Gap        | Space between nested blocks — set separately for desktop and mobile.                       |
| Appearance | Border thickness, corner radius, and shadow.                                               |
| Background | **Media** (None, Image, Video), overlay color, and backdrop blur.                          |
| Color      | **Inherit** the section's color scheme, or apply a separate **Color scheme**.              |
| Link       | Wrap the whole tile in a link, optionally opening in a new tab.                            |
| Padding    | Outer spacing on all four sides, with independent mobile values via **Custom for mobile**. |

#### Item Blocks

Blocks you can add inside an Item.

| Block                                                                      | Description                                                                                                                                                     |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                            | Main headline.                                                                                                                                                  |
| [Subheading](/helix/theme-blocks/basic/subheading.md)                      | Small label above or below the heading.                                                                                                                         |
| [Text](/helix/theme-blocks/basic/text.md)                                  | Rich-text paragraph for supporting copy.                                                                                                                        |
| [Button](/helix/theme-blocks/basic/button.md)                              | Single call-to-action with label, link, and style.                                                                                                              |
| [Buttons](/helix/theme-blocks/basic/buttons.md)                            | Two side-by-side buttons.                                                                                                                                       |
| [Image](/helix/theme-blocks/basic/image.md)                                | Inline image within the content, such as a logo or badge.                                                                                                       |
| [Image comparison](/helix/theme-blocks/basic/image-comparison.md)          | Before-and-after images with a draggable handle.                                                                                                                |
| [Video](/helix/theme-blocks/basic/video.md)                                | Uploaded or external video with a play button.                                                                                                                  |
| [Icon](/helix/theme-blocks/basic/icon.md)                                  | An icon from the theme library, shown inline.                                                                                                                   |
| [Group](/helix/theme-blocks/layout/group.md)                               | A container that arranges several blocks in a row or column.                                                                                                    |
| [Divider](/helix/theme-blocks/layout/divider.md)                           | A horizontal line between content blocks.                                                                                                                       |
| [Popup](/helix/theme-blocks/links/popup.md)                                | A button that opens an overlay, such as a video or extra detail.                                                                                                |
| [Spacer](/helix/theme-blocks/layout/spacer.md)                             | Empty block for adjusting vertical spacing. See [How to set up custom spacing](/helix/how-to-guides/how-to-set-up-custom-spacing.md) for per-breakpoint values. |
| [Image card](/helix/theme-blocks/cards/image-card.md)                      | An image with its own caption and link.                                                                                                                         |
| [Product card: Compact](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card, for shoppable tiles.                                                                                                                    |
| [Colors](/helix/theme-blocks/basic/colors.md)                              | A row of color swatches built from nested Item blocks.                                                                                                          |