---
title: "<Row>"
description: "A multi-column container — holds <Column> children side by side."
url: https://www.unitpost.com/components/row
section: Components
updated: 2026-07-14
---
# <Row>

## <Row>

> A multi-column container — holds <Column> children side by side.

Rows render as a single table row with one cell per column, so they stay side-by-side even in Outlook. A Row may only contain Column components.

```tsx
<Row column-gap={8}>
  <Column width={50}>
    <Text>Left</Text>
  </Column>
  <Column width={50}>
    <Text>Right</Text>
  </Column>
</Row>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `column-gap` | number | 8 | Horizontal gap (px) between columns. Set 0 for flush. |
| `stack-on-mobile` | boolean | true | Best-effort: let columns wrap on narrow viewports (table emails stay side-by-side in Outlook). |
| `background-color` | color | — | Fill color behind the row. |
| `padding-x` | number | 24 | Horizontal inner padding (px). |
| `padding-y` | number | 8 | Vertical inner padding (px). |
| `border-width` | number | — | Border stroke width (px). 0/absent = no visible border. |
| `border-style` | enum | — | Border stroke style. |
| `border-color` | color | — | Border stroke color. |
| `border-radius` | number | — | Corner rounding (px). Independent of width — round a filled card without a stroke. |

## Related

- [<Column>](https://www.unitpost.com/components/column): A vertical slice of a Row. Only valid inside <Row>.
- [<Heading>](https://www.unitpost.com/components/heading): A title (H1–H4). Inner text supports {{variables}}.
- [<Text>](https://www.unitpost.com/components/text): A paragraph of body copy. Supports inline marks and {{variables}}.