---
title: Columns
description: Coloca contenido lado a lado en un diseño de varias columnas responsivo.
url: https://docs.thally.io/es/components/columns
---

# Columns

Coloca contenido lado a lado en un diseño de varias columnas responsivo.

`<Columns>` crea una cuadrícula CSS con un número de columnas configurable. A diferencia de `<CardGroup>`, no hay borde de tarjeta — es únicamente un primitivo de diseño que colapsa a una sola columna en dispositivos móviles.

## Dos columnas

  <div>
    **Columna izquierda**

    Úsala para tablas de comparación, fragmentos de código lado a lado o diagramas de múltiples paneles. Ambas columnas se apilan verticalmente en dispositivos móviles.
  </div>
  <div>
    **Columna derecha**

    Cada columna puede contener cualquier contenido MDX — párrafos, listas, bloques de código, llamadas de atención o componentes anidados.
  </div>

```mdx
<Columns cols={2}>
  <div>
    **Columna izquierda**

    Úsala para tablas de comparación, fragmentos de código lado a lado o diagramas de múltiples paneles. Ambas columnas se apilan verticalmente en dispositivos móviles.
  </div>
  <div>
    **Columna derecha**

    Cada columna puede contener cualquier contenido MDX — párrafos, listas, bloques de código, llamadas de atención o componentes anidados.
  </div>
</Columns>
```

## Tres columnas

  <div>
    **Configuración**

    Instala el paquete, agrega tu clave API y ejecuta `npm run dev`.
  </div>
  <div>
    **Configurar**

    Edita `docs.json` para definir tu navegación, marca e integraciones.
  </div>
  <div>
    **Desplegar**

    Haz push a GitHub y conecta tu repositorio a Vercel o cualquier host estático.
  </div>

```mdx
<Columns cols={3}>
  <div>
    **Configuración**

    Instala el paquete, agrega tu clave API y ejecuta `npm run dev`.
  </div>
  <div>
    **Configurar**

    Edita `docs.json` para definir tu navegación, marca e integraciones.
  </div>
  <div>
    **Desplegar**

    Haz push a GitHub y conecta tu repositorio a Vercel o cualquier host estático.
  </div>
</Columns>
```

## Cuatro columnas

  <div>
    **TypeScript**

    SDK con tipado estricto y soporte completo de IntelliSense.
  </div>
  <div>
    **Python**

    Cliente con async como prioridad, compatible con FastAPI y Django.
  </div>
  <div>
    **Go**

    Módulo ligero y sin dependencias para Go 1.21+.
  </div>
  <div>
    **Ruby**

    Gema idiomática con extensiones de ActiveSupport.
  </div>

```mdx
<Columns cols={4}>
  <div>
    **TypeScript**

    SDK con tipado estricto y soporte completo de IntelliSense.
  </div>
  <div>
    **Python**

    Cliente con async como prioridad, compatible con FastAPI y Django.
  </div>
  <div>
    **Go**

    Módulo ligero y sin dependencias para Go 1.21+.
  </div>
  <div>
    **Ruby**

    Gema idiomática con extensiones de ActiveSupport.
  </div>
</Columns>
```

## Combinación con otros componentes

Las columnas funcionan bien con `<Frame>` para comparaciones de imágenes lado a lado:

    <img src="/images/image1.jpg" alt="Before" />

    <img src="/images/image2.jpg" alt="After" />

```mdx
<Columns cols={2}>
  <Frame caption="Antes">
    <img src="/images/image1.jpg" alt="Before" />
  </Frame>
  <Frame caption="Después">
    <img src="/images/image2.jpg" alt="After" />
  </Frame>
</Columns>
```

## Props

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `cols` | `1 \| 2 \| 3 \| 4` | `2` | Número de columnas |