# Grid

> Grid components for arranging content in rows and columns.

Web: https://react.email/components/grid

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## One row, two columns

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/one-row-two-columns

### Tailwind

```tsx
<>
  <Row cellSpacing={8}>
    <Column align="center" className="h-[40px] w-1/2 bg-emerald-400/60">
      1/2
    </Column>
    <Column align="center" className="h-[40px] w-1/2 bg-cyan-400/60">
      1/2
    </Column>
  </Row>
  <Row>
    <Column align="center" className="h-[40px] w-1/3 bg-pink-400/60">
      1/3
    </Column>
    <Column align="center" className="h-[40px] w-2/3 bg-purple-400/60">
      2/3
    </Column>
  </Row>
</>
```

### Inline styles

```tsx
<>
  <Row cellSpacing={8}>
    <Column
      align="center"
      style={{
        width: '50%',
        height: 40,
        backgroundColor: 'rgb(52,211,153,0.6)',
      }}
    >
      1/2
    </Column>
    <Column
      align="center"
      style={{
        width: '50%',
        height: 40,
        backgroundColor: 'rgb(34,211,238,0.6)',
      }}
    >
      1/2
    </Column>
  </Row>
  <Row>
    <Column
      align="center"
      style={{
        width: '33.333333%',
        height: 40,
        backgroundColor: 'rgb(244,114,182,0.6)',
      }}
    >
      1/3
    </Column>
    <Column
      align="center"
      style={{
        width: '66.666667%',
        height: 40,
        backgroundColor: 'rgb(192,132,252,0.6)',
      }}
    >
      2/3
    </Column>
  </Row>
</>
```

## One row, three columns

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/one-row-three-columns

### Tailwind

```tsx
<Row>
  <Column align="center" className="h-[40px] w-1/3 bg-orange-400/60">
    1/3
  </Column>
  <Column align="center" className="h-[40px] w-1/3 bg-emerald-400/60">
    1/3
  </Column>
  <Column align="center" className="h-[40px] w-1/3 bg-cyan-400/60">
    1/3
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column
    align="center"
    style={{
      width: '33.333333%',
      height: 40,
      backgroundColor: 'rgb(251,146,60,0.6)',
    }}
  >
    1/3
  </Column>
  <Column
    align="center"
    style={{
      width: '33.333333%',
      height: 40,
      backgroundColor: 'rgb(52,211,153,0.6)',
    }}
  >
    1/3
  </Column>
  <Column
    align="center"
    style={{
      width: '33.333333%',
      height: 40,
      backgroundColor: 'rgb(34,211,238,0.6)',
    }}
  >
    1/3
  </Column>
</Row>
```