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

## Overview

One or more cells can be placed in a [`grid`](/docs/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:

**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>
```

**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>
```

<Info>

**Note**: Components inside a cell are always aligned to the **top** of the cell.

</Info>

### Basic Example

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

## Advanced Attributes

### `column-span`

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

Specify the number of columns the cell should span.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2f2xkznvrfg3xdfwpgcdpm-2fgrid-example-column-span-9d53ed7d.png)

**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>
```

### `row-span`

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

Specify the number of rows the cell should span.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fxgxdt71wz8no7vpa5uj7-2fgrid-example-row-span-2ddd8025.png)

**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>
```

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

### `background-color`

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

### `border-radius`

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

### `border-width`

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

### `border-color`

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

### `border-style`

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

### `padding`

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