# Grid

> Grid components for arranging content in rows and columns.

Web: https://vuemail.dev/components/grid

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## One row, two columns

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/one-row-two-columns

### Tailwind

```vue
<script setup lang="ts">
import { Column, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row :cellspacing="8">
    <Column align="center" class="h-[40px] w-1/2 bg-emerald-400/60">1/2</Column>
    <Column align="center" class="h-[40px] w-1/2 bg-cyan-400/60">1/2</Column>
  </Row>
  <Row>
    <Column align="center" class="h-[40px] w-1/3 bg-pink-400/60">1/3</Column>
    <Column align="center" class="h-[40px] w-2/3 bg-purple-400/60">2/3</Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Row } from '@vuemaildev/vuemail';
</script>

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

## One row, three columns

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/one-row-three-columns

### Tailwind

```vue
<script setup lang="ts">
import { Column, Row } from '@vuemaildev/vuemail';
</script>

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

### Inline styles

```vue
<script setup lang="ts">
import { Column, Row } from '@vuemaildev/vuemail';
</script>

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