Columnas
Diseño de cuadrícula responsiva para mostrar Cards, Tiles y otro contenido lado a lado. Se adapta automáticamente al tamaño de pantalla.
Columns crea un diseño de cuadrícula responsiva para mostrar elementos de contenido lado a lado. 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.
Funciona con Cards, Tiles, imágenes y componentes personalizados.
Uso básico
Muestra contenido en dos columnas (predeterminado):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=mrtvmucv" 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
Columns se adapta automáticamente al tamaño de pantalla:
- Móvil (< 768px): 1 columna
- Tablet (768px - 1024px): 2 columnas máximo
- Escritorio (> 1024px): Número completo de columnas
Props
Número de columnas por fila. Acepta valores de 1 a 4.