Colonne
Layout a griglia reattivo per mostrare Card, Tile e altri contenuti affiancati, adattandosi automaticamente alle dimensioni dello schermo.
Columns crea un layout a griglia reattivo per mostrare gli elementi di contenuto affiancati. La griglia si adatta automaticamente agli schermi più piccoli, disponendo gli elementi in pila sui dispositivi mobili ed espandendosi su desktop.
Gli screenshot mostrano l'interfaccia in inglese.
Funziona con Card, Tile, immagini e componenti personalizzati.
Utilizzo di base
Mostra i contenuti in due colonne (impostazione predefinita):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=msuxsk5d" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=msuxsk5d" alt="Tabs preview" />
</Tile>
</Columns>Più colonne
Usa cols={3} o cols={4} per layout più densi:
<Columns cols={3}>
...
</Columns>Scelta del numero di colonne
| Tipo di contenuto | Colonne consigliate |
|---|---|
| Tile con immagini | 2-3 |
| Elementi con molto testo | 2 |
| Metriche/statistiche ridotte | 3-4 |
| Confronti tra immagini | 2 |
Comportamento reattivo
Columns si adatta automaticamente alle dimensioni dello schermo:
- Dispositivo mobile (< 768px): 1 colonna
- Tablet (768px - 1024px): massimo 2 colonne
- Desktop (> 1024px): numero completo di colonne
Props
Numero di colonne per riga. Accetta valori da 1 a 4.