Colonnes
Mise en page en grille responsive pour afficher des cartes, des tuiles et d'autres contenus côte à côte. S'adapte automatiquement à la taille de l'écran.
Columns crée une mise en page en grille responsive pour afficher des éléments de contenu côte à côte. La grille s'adapte automatiquement aux écrans plus petits, en empilant sur mobile et en s'élargissant sur desktop.
Les captures d'écran montrent l'interface en anglais.
Utilisez Columns pour afficher du contenu côte à côte dans une grille responsive. Fonctionne avec des cartes, des tuiles, des images et des composants personnalisés.
Utilisation de base
Afficher le contenu en 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=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>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 |
|---|---|
| Tuiles avec images | 2-3 |
| Éléments à texte dense | 2 |
| Petites métriques/statistiques | 3-4 |
| Comparaisons d'images | 2 |
Comportement responsive
Les colonnes s'adaptent automatiquement à la taille de l'écran :
- Mobile (< 768px) : 1 colonne
- Tablette (768px - 1024px) : 2 colonnes maximum
- Desktop (> 1024px) : Nombre de colonnes complet
Props
Nombre de colonnes par ligne. Accepte des valeurs de 1 à 4.