# cell

## Overview

One or more cells can be placed in a [`grid`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/grid) to specify the size and position of components in a column- and row-based layout. Cells can span multiple columns or rows in a `grid`.

Note that specifying `cell` inside a `grid` is optional. Each component inside a grid will be interpreted as being inside a cell if `cell` isn’t specified.

To illustrate, the following will look and work the same in an app:

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

```xml
<grid>
    <text-input label="First name" bind="first_name" required="false" />
    <text-input label="Last name" bind="last_name" required="false" />
</grid>
```

{% endcode %}

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

```xml
<grid>
    <cell>
        <text-input label="First name" bind="first_name" required="false" />
    </cell>
    <cell>
        <text-input label="Last name" bind="last_name" required="false" />
    </cell>
</grid>
```

{% endcode %}

{% hint style="info" %}
**Note**: Components inside a cell are always aligned to the **top** of the cell.
{% endhint %}

### Basic Example

See the [basic example](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/grid/..#basic-example) for `grid`.

## Standard Attributes

None

## Advanced Attributes

### `column-span`

**Optional**

**Type**: `integer`

**Default**: 1

Specify the number of columns the cell should span.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2F2XKzNvRFg3XDFwpgCDPM%2Fgrid-example-column-span.png?alt=media\&token=cdc2f5c0-1eb8-40b1-96cf-3cdf061208ad)

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

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

{% endcode %}

### `row-span`

**Optional**

**Type**: `integer`

**Default**: 1

Specify the number of rows the cell should span.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FXGxdT71WZ8nO7Vpa5uj7%2Fgrid-example-row-span.png?alt=media\&token=50e4310a-02c4-40c9-a0f6-d84377bfb8ac)

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

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

{% endcode %}

### `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 %}

## Component Methods

None