# Grid (/docs/products/dash-dots/reference/components/grid)

Put a `GridItem` inside it for each tile. It suits a home screen of services: Airtime, Electricity, Water, Bills.

**Children:** Components

## Example

![The Grid component](/assets/images/dash-dots/components/grid.webp)

```xml title="view.dml"
<Grid columns="3" gap="small">
  <GridItem icon="send" label="Send" onTap="open" data-page="send" />
  <GridItem icon="wallet" label="Top up" onTap="open" data-page="top-up" />
  <GridItem icon="receipt" label="Bills" badge="2" onTap="open" data-page="bills" />
</Grid>
```

```ts title="controller.ts"
export default definePage({
  initialState: {},
  actions: {
    open(_state, event: DataEvent<{ page: 'send' | 'top-up' | 'bills' }>) {
      this.navigation.push(event.data.page);
    },
  },
});
```

## Props

| Prop                                                                   | Type                                                             | What it is                                        |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------- |
| `columns`                                                              | `number`                                                         | Default: `4`.                                     |
| `gap`                                                                  | [spacing](/docs/products/dash-dots/reference/components#spacing) | Default: `medium`.                                |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side. |

## Events

None.