---
title: "grid"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/grid/
---
# grid

## Overview

The `grid` UI component gives developers more control over the layout of UI components in a view. This is useful when there is a need to customize the width of UI components respective to other components on the view (where previously [`columns`](/docs/build/ui-components/all-ui-components/columns/) kept each component’s width equal). `grid` could also be used to layout components in a way that is similar to layout to icons on a phone’s homescreen. Another use case is to keep more content visible on the screen, where previously [`column`](/docs/build/ui-components/all-ui-components/columns/column/) content overflowed and became scrollable.

<Info title={"Version compatibility"}>

`grid` was introduced in version **4.85.0** of the JourneyApps Runtime.

</Info>

A `grid` contains `cell`s to specify the size and position of UI components:

- [cell](/docs/build/ui-components/all-ui-components/grid/cell/)

### Basic Example

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fiefdrdct9jelirbnzs9p-2fgrid-example-bcd53825.jpeg)

**main.view\.xml**

```xml
<grid>
    <cell>
        <heading>Cell 1</heading>
        <display-image src="images/example-corp-main-view-image-001.png" />
    </cell>
    <cell>
        <heading>Cell 2</heading>
        <text-input label="First name" bind="first_name" required="false" />
    </cell>
    <cell>
        <heading>Cell 3</heading>
        <capture-photo label="Photo of Person" bind="photo" source="any" resolution="small" downloadable="true" />
    </cell>
    <cell column-span="2">
        <heading>Cell 4</heading>
        <text-input label="First name" placeholder="Enter first name" bind="first_name" required="false" />
        <button label="Submit" icon="fa-arrow-right" icon-position="right" />
    </cell>
    <cell>
        <heading>Cell 5</heading>
        <object-dropdown label="Country of residence" placeholder="Select a country" query="countries" bind="selected_country" required="false" />
    </cell>
    <cell column-span="2">
        <heading>Cell 6</heading>
        <display-coordinates id="current-location" label="Current location" bind="current_location" allow-zoom="true" allow-dragging="true">
            <marker label="You are here" bind="marker" icon="fa-home" />
        </display-coordinates>
    </cell>
</grid>
```

Have a look at some additional examples here:

- [grid examples](/docs/build/ui-components/all-ui-components/grid/grid-examples/)

### Limitations

* Nesting a `grid` inside an `object-repeat` is not currently supported.

## Advanced Attributes

### `column-count`

<SyntaxCard type="integer" defaultValue="automatic" />

Specify the number of columns that the `grid` will generate.

<Info>

**Note**:&#x20;

* If `column-count` has been specified and the columns do not fit inside the screen (such as on small devices) then the grid will become horizontally scrollable.&#x20;
* If `column-count` has not been specified, i.e. the column count is automatically determined, the grid component will try and reduce the number of columns to adhere to the [minimum allowed column width](#column-min-width) as the screen size is reduced.

</Info>

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fcszjccpu2icbdjh37uvv-2fgrid-example-column-count-00f08184.png)

**main.view\.xml**

```xml
<grid column-count="3" >
    <cell>
        <text-input label="First name" bind="first_name" required="false" />
        <button label="Button" />
    </cell>
</grid>
```

### `column-min-width`

<SyntaxCard type="integer" defaultValue="250 px" />

Specify the minimum allowed width (in pixels) for the `grid`’s columns.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fuxz0byrnl8uzksymmpcz-2fgrid-example-column-min-width-3e863500.png)

**main.view\.xml**

```xml
<grid column-min-width="1000" >
    <cell>
        <text-input label="First name" bind="first_name" required="false" />
        <button label="Button" />
    </cell>
</grid>
```

### `column-order`

<SyntaxCard type={["left-to-right", "right-to-left"]} defaultValue="left-to-right" introduced="4.86.1" />

Specify the order of the grid's columns.

**main.view\.xml**

```xml
<info>column-order="left-to-right"</info>
<grid column-order="left-to-right" column-count="4">
    <cell>
        <heading>Cell 1</heading>
    </cell>
    <cell>
        <heading>Cell 2</heading>
    </cell>
    <cell>
        <heading>Cell 3</heading>
    </cell>
    <cell>
        <heading>Cell 4</heading>
    </cell>
</grid>

<info>column-order="right-to-left"</info>
<grid column-order="right-to-left" column-count="4">
    <cell>
        <heading>Cell 1</heading>
    </cell>
    <cell>
        <heading>Cell 2</heading>
    </cell>
    <cell>
        <heading>Cell 3</heading>
    </cell>
    <cell>
        <heading>Cell 4</heading>
    </cell>
</grid>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fr1l80ngpvrrmmn3jmrpo-2fimage-1af1eba5.png)

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `margin`

<AttributeReference label="margin" href="/docs/build/ui-components/common-attributes/margin/" badge="new" sinceVersion="5.1.0" />