---
title: Vertikale Aufteilung
slug: docs/de/vertikale-aufteilung
createdAt: 2026-06-05T14:43:33.191Z
---

[Vertikale Teilung](docId\:HfEpUF-iowQU3k_H3nD8A) Blöcke ordnen Inhalte in zwei nebeneinander liegende Spalten an. Sie sind nützlich für Vergleiche, Layouts mit unterstützenden Informationen oder die Darstellung von Code zusammen mit Erklärungen.

## Syntax

Sie können diese Komponente entweder mit Markdown oder MDX hinzufügen.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>
    Left content.
  </VerticalSplitItem>
  <VerticalSplitItem>
    Right content.
  </VerticalSplitItem>
</VerticalSplit>
```
:::
::::

Vertical Split Blöcke unterstützen drei Layoutoptionen:

- `links`, erzeugt eine breitere linke Spalte.
- `Mitte`, erzeugt zwei gleich breite Spalten.
- `rechts`, erzeugt eine breitere rechte Spalte.

Jedes Layout erfordert genau zwei `VerticalSplitItem` Blöcke.

## MDX Beispiel

Die folgenden Beispiele zeigen die drei verfügbaren Layoutoptionen.

### Gleich breite Spalten (`Mitte`)

```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>

  ### Left Column

  This column takes up equal space with the right column.

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Right Column

  Perfect for comparing features, showing before/after, or code + explanation.

  </VerticalSplitItem>
</VerticalSplit>
```

### Linkslastiges Layout (`links`)

```javascript
<VerticalSplit layout="left">
  <VerticalSplitItem>

  ### Main Content

  The left column is wider — use this when the left side has the primary content and the right side has supplementary info.

  </VerticalSplitItem>
  <VerticalSplitItem>

  <hint type="info">
  This sidebar provides extra context.
  </hint>

  </VerticalSplitItem>
</VerticalSplit>
```

### Rechtslastiges Layout (`rechts`)

```javascript
<VerticalSplit layout="right">
  <VerticalSplitItem>

  **Quick links:**
  - [Tabs](/tabs)
  - [Tables](/tables)

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Detailed Explanation

  The right column is wider — use this when the right side has the primary content.

  </VerticalSplitItem>
</VerticalSplit>
```