---
title: División vertical
slug: docs/es/6g7R-division-vertical
docTags: 
createdAt: 2026-06-05T14:43:33.191Z
---

[División vertical](docId\:eLHO__KQv-U_ndexoWlp6) organiza el contenido en dos columnas una al lado de la otra. Es útil para comparaciones, diseños con información de apoyo o para presentar código junto con explicaciones.

## Sintaxis

Usted puede agregar este componente usando ya sea Markdown o 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>
```
:::
::::

Los bloques de División Vertical admiten tres opciones de diseño:

- `izquierda`, crea una columna izquierda más ancha.
- `medio`, crea dos columnas de igual tamaño.
- `derecha`, crea una columna derecha más ancha.

Cada diseño requiere exactamente dos `VerticalSplitItem` bloques.

## Ejemplo en MDX

Los siguientes ejemplos demuestran las tres opciones de diseño disponibles.

### Columnas Iguales (`medio`)

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

### Diseño con Mayor Peso a la Izquierda (`izquierda`)

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

### Diseño con Mayor Peso a la Derecha (`derecha`)

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