Columnas
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="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=moa8o29o" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=moa8o29o" alt="Tabs preview" />
</Tile>
</Columns>Más columnas
Usa cols={3} o cols={4} para diseños más densos:
<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
Número de columnas por fila. Acepta valores del 1 al 4.