---
title: Scission verticale
slug: docs/fr/scission-verticale
createdAt: 2026-06-05T14:43:33.191Z
---

[Fractionnement vertical](docId\:cKaJRQ6clkSLLqRBaK4qJ) organise le contenu en deux colonnes côte à côte. Elles sont utiles pour des comparaisons, des mises en page avec des informations de soutien ou pour présenter du code avec des explications.

## Syntaxe

Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.

::::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>
```
:::
::::

Les blocs Vertical Split prennent en charge trois options de mise en page :

- `gauche`, crée une colonne de gauche plus large.
- `milieu`, crée deux colonnes de taille égale.
- `droite`, crée une colonne de droite plus large.

Chaque mise en page nécessite exactement deux `VerticalSplitItem` blocs.

## Exemple MDX

Les exemples suivants démontrent les trois options de mise en page disponibles.

### Colonnes égales (`milieu`)

```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>
```

### Disposition dominante à gauche (`gauche`)

```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>
```

### Disposition dominante à droite (`droite`)

```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>
```