# columns

## Overview

`columns` allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.

{% hint style="info" %}
On screens narrower than the 768px breakpoint value (i.e. smartphones as opposed to tablets), columns will be stacked — the components inside of them are rendered below each other as if they were not defined in columns.
{% endhint %}

### Multiple columns

Columns now support multiple nested columns which enables use cases like the following:

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-14a3a47f215f0c377de0845ec68e27aad674ccb8%2Fcolumns-multiple.png?alt=media)

### Basic Example

{% code title="main.view\.xml" %}

```xml
<columns>
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-a1fca154f2a0d87a9ee5b0cf531639b3f3d7b453%2Fcolumns-example.png?alt=media)

## Standard Attributes

None

## Advanced Attributes

### `column-gap`

{% hint style="info" %}
**Version compatibility**

`column-gap` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `number` (a values in px)

**Default**: 48 px

Specify the width of the gap between columns.

{% code title="main.view\.xml" %}

```xml
<info>default column-gap</info>
<columns>
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>

<info>column-gap="80"</info>
<columns column-gap="80">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
```

{% endcode %}

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FiPJHXGmEosUBCBtS0knR%2Fimage.png?alt=media&#x26;token=870f1300-fc38-4e04-b72d-cd82efff3a60" alt=""><figcaption></figcaption></figure>

### `column-order`

{% hint style="info" %}
**Version compatibility**

`column-order` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `left-to-right`| `right-to-left`

**Default**: `left-to-right`

Specify the order of the columns.

{% code title="main.view\.xml" %}

```xml
<info>column-order="left-to-right"</info>
<columns column-order="left-to-right">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>

<info>column-order="right-to-left"</info>
<columns column-order="right-to-left">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
```

{% endcode %}

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FHXMEciFhpwgVYohvvjZo%2Fimage.png?alt=media&#x26;token=f504ae04-3e5c-4d04-b1ee-d8595905bd66" alt=""><figcaption></figcaption></figure>

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}


---

# 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://docs.journeyapps.com/reference/build/ui-components/all-ui-components/columns.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.