> 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/columns.md).

# Columns

A responsive grid of equal-width **Column** blocks, each holding its own content. Use it for feature rows, icon grids, or any side-by-side layout.

## Settings

| Setting                          | Description                                                                            |
| -------------------------------- | -------------------------------------------------------------------------------------- |
| Desktop columns / Mobile columns | Number of columns per row — 2–6 on desktop, 1–2 on mobile.                             |
| Enable swipe on mobile           | Lets the columns scroll sideways on mobile instead of stacking.                        |
| Custom columns                   | Set the column count per breakpoint yourself, via **Columns per breakpoint**.          |
| Gap — Horizontal / Vertical      | Spacing between columns and rows, 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

### Column

A single column. Each one is a mini layout container — set its content direction, alignment, background, and link, then fill it with nested blocks.

#### Column Settings

| Setting            | Description                                                                                     |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| Direction          | Arrange content as a **Horizontal** row or **Vertical** column, with alignment along both axes. |
| Vertical on mobile | Collapse a horizontal row into a stack on mobile, with its own **Alignment (mobile)**.          |
| Gap                | Space between nested blocks — set separately for desktop and mobile.                            |
| Height             | **Fit** the content or **Fill** the row.                                                        |
| Appearance         | Border thickness, corner radius, and shadow.                                                    |
| Background         | **Media** (None, Image, Video), with a separate mobile image, overlay color, and backdrop blur. |
| Color              | **Inherit** the section's color scheme, or apply a separate **Color scheme**.                   |
| Link               | Wrap the whole column in a link, optionally opening in a new tab.                               |
| Padding            | Outer spacing on all four sides, with independent mobile values via **Custom for mobile**.      |

#### Column Blocks

Blocks you can add inside a Column.

| 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. |
| [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.                                                                                                          |