> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Column Layouts

> Insert responsive multi-column layouts.

## Quick start

Column extensions are included in `StarterKit` by default; no extra imports are needed.

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';

const extensions = [StarterKit];
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content" />
</template>
```

## Inserting columns programmatically

Use the `insertColumns` command to add a column layout.

```ts theme={null}
// Insert a 2-column layout
editor.chain().focus().insertColumns(2).run();

// Insert a 3-column layout
editor.chain().focus().insertColumns(3).run();

// Insert a 4-column layout
editor.chain().focus().insertColumns(4).run();
```

## Building a toolbar

Here's a complete example with a toolbar for inserting column layouts. It uses the `before` slot
of `EditorProvider` to position the toolbar above the editor.

```vue toolbar.vue theme={null}
<script setup lang="ts">
import { useCurrentEditor } from '@vuemaildev/editor/core';
import { Columns2, Columns3, Columns4 } from 'lucide-vue-next';

const { editor } = useCurrentEditor();
</script>

<template>
  <div v-if="editor" :style="{ display: 'flex', gap: '8px', marginBottom: '16px' }">
    <button type="button" @click="editor.chain().focus().insertColumns(2).run()">
      <Columns2 :size="16" />
      2 columns
    </button>
    <button type="button" @click="editor.chain().focus().insertColumns(3).run()">
      <Columns3 :size="16" />
      3 columns
    </button>
    <button type="button" @click="editor.chain().focus().insertColumns(4).run()">
      <Columns4 :size="16" />
      4 columns
    </button>
  </div>
</template>
```

```vue my-editor.vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import Toolbar from './toolbar.vue';

const extensions = [StarterKit];
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <template #before>
      <Toolbar />
    </template>
  </EditorProvider>
</template>
```

> [!TIP]
>
> Use the `before` slot to render custom UI above the editor, and `useCurrentEditor()` to access
> the editor instance from child components.

## Column spacing

Column layouts render as email-safe tables. Space between columns is stored as the
`cellspacing` attribute on the column layout and exported as the `cellspacing`
attribute of the underlying `Row`.

Select a 2, 3, or 4 column layout in the editor and use **Column spacing** in
the inspector to adjust the gap between columns.

> [!TIP]
>
> Column spacing controls the gap between columns. Padding on an individual
> column controls the space inside that column.

## Slash commands

The default slash commands include column layouts. Type `/` and search for "columns":

* **Two Columns**: `TWO_COLUMNS`
* **Three Columns**: `THREE_COLUMNS`
* **Four Columns**: `FOUR_COLUMNS`

See [Slash Commands](https://vuemail.dev/docs/editor/features/slash-commands.md) for setup details.

## Examples

See column layouts in action with a runnable example:

> **[Column Layouts](https://vuemail.dev/editor/column-layouts)**
>
> Toolbar-driven 2/3/4 column insertion.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.