---
title: Columnas
description: Diseño de cuadrícula responsivo para mostrar Cards, Tiles y otro contenido en paralelo. Se adapta automáticamente al tamaño de pantalla.
---

Columns crea un diseño de cuadrícula responsivo para mostrar elementos de contenido en paralelo. La cuadrícula se adapta automáticamente a pantallas más pequeñas, apilándose en móvil y expandiéndose en escritorio.

Las capturas de pantalla muestran la interfaz en inglés.

Usa Columns para mostrar contenido en paralelo en una cuadrícula responsiva. Funciona con Cards, Tiles, imágenes y componentes personalizados.

## Uso básico

Muestra contenido en dos columnas (valor predeterminado):

<Columns>
  <Tile href="/es/components/tabs" title="Tabs" description="Organiza el contenido con pestañas">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/es/components/tabs" title="Tabs" description="Cambia entre vistas">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>

```mdx
<Columns>
  <Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/components/tabs" title="Tabs" description="Switch between views">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>
```

## Más columnas

Usa `cols={3}` o `cols={4}` para diseños más densos:

<Columns cols={3}>
  <Tile href="/es/components/tabs" title="Tabs" description="Organiza el contenido">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/es/components/tabs" title="Tabs" description="Cambia vistas">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/es/components/tabs" title="Tabs" description="Contenido con pestañas">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>

```mdx
<Columns cols={3}>
  ...
</Columns>
```

## Elegir el número de columnas

| Tipo de contenido | Columnas recomendadas |
|--------------|---------------------|
| Tiles con imágenes | 2-3 |
| Elementos con mucho texto | 2 |
| Métricas/estadísticas pequeñas | 3-4 |
| Comparaciones de imágenes | 2 |

## Comportamiento responsivo

Las columnas se adaptan automáticamente al tamaño de pantalla:
- **Móvil** (< 768px): 1 columna
- **Tablet** (768px - 1024px): máximo 2 columnas
- **Escritorio** (> 1024px): número completo de columnas

## Props

<ParamField name="cols" type="number" default="2">
  Número de columnas por fila. Acepta valores del 1 al 4.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>