Spalten
Responsives Rasterlayout zur Darstellung von Cards, Tiles und anderen Inhalten nebeneinander. Passt sich automatisch an die Bildschirmgröße an.
Columns erstellt ein responsives Rasterlayout zur Darstellung von Inhaltselementen nebeneinander. Das Raster passt sich automatisch an kleinere Bildschirme an, wobei die Inhalte auf Mobilgeräten untereinander angeordnet und auf Desktopgeräten erweitert werden.
Funktioniert mit Cards, Tiles, Bildern und benutzerdefinierten Komponenten.
Die Screenshots zeigen die Benutzeroberfläche auf Englisch.
Grundlegende Verwendung
Inhalte in zwei Spalten anzeigen (Standard):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=msp3nl3i" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=msp3nl3i" alt="Tabs preview" />
</Tile>
</Columns>Weitere Spalten
Verwende cols={3} oder cols={4} für dichtere Layouts:
<Columns cols={3}>
...
</Columns>Spaltenanzahl auswählen
| Inhaltstyp | Empfohlene Spalten |
|---|---|
| Tiles mit Bildern | 2–3 |
| Textlastige Elemente | 2 |
| Kleine Kennzahlen/Statistiken | 3–4 |
| Bildvergleiche | 2 |
Responsives Verhalten
Columns passt sich automatisch an die Bildschirmgröße an:
- Mobilgerät (< 768px): 1 Spalte
- Tablet (768px–1024px): maximal 2 Spalten
- Desktop (> 1024px): Vollständige Spaltenanzahl
Props
Anzahl der Spalten pro Zeile. Akzeptiert Werte von 1 bis 4.