Colonnes
Grille responsive pour afficher Cards, Tiles et autre contenu côte à côte. S'adapte automatiquement à la taille de l'écran.
Columns crée une grille responsive pour afficher des éléments de contenu côte à côte. La grille s'adapte automatiquement aux petits écrans, s'empilant sur mobile et s'étendant sur ordinateur.
Les captures d'écran montrent l'interface en anglais.
Fonctionne avec les Cards, Tiles, images et composants personnalisés.
Utilisation de base
Affichez le contenu sur deux colonnes (par défaut) :
<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>Plus de colonnes
Utilisez cols={3} ou cols={4} pour des mises en page plus denses :
<Columns cols={3}>
...
</Columns>Choisir le nombre de colonnes
| Type de contenu | Colonnes recommandées |
|---|---|
| Tiles avec images | 2-3 |
| Éléments riches en texte | 2 |
| Petites métriques/statistiques | 3-4 |
| Comparaisons d'images | 2 |
Comportement responsive
Columns s'adapte automatiquement à la taille de l'écran :
- Mobile (< 768px) : 1 colonne
- Tablette (768px - 1024px) : 2 colonnes max
- Ordinateur (> 1024px) : Nombre de colonnes complet
Props
Nombre de colonnes par ligne. Accepte des valeurs de 1 à 4.