Colonne
Columns dispone i contenuti affiancati in una griglia reattiva che si impila su mobile e si espande su desktop, con un numero di colonne configurabile da una a quattro.
Columns dispone i contenuti affiancati in una griglia reattiva. La griglia si impila su mobile e si espande su desktop.
Inserisci al suo interno Card, Tile, immagini o componenti personalizzati.
Gli screenshot mostrano l'interfaccia in inglese.
Utilizzo di base
Mostra il contenuto su due colonne (impostazione predefinita):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" 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 ricchi di testo | 2 |
| Metriche/statistiche brevi | 3-4 |
| Confronti di immagini | 2 |
Comportamento reattivo
Il numero di colonne cambia in base alla larghezza dello schermo:
- Mobile (< 768px): 1 colonna
- Tablet (768px - 1024px): massimo 2 colonne
- Desktop (> 1024px): numero pieno di colonne
Props
Numero di colonne per riga. Accetta valori da 1 a 4.