Spalten
Columns ordnet Inhalte in einem responsiven Raster nebeneinander an, das sich auf Mobilgeräten stapelt und auf Desktops erweitert; wählbar sind ein bis vier Spalten.
Columns ordnet Inhalte in einem responsiven Raster nebeneinander an. Auf Mobilgeräten stapelt sich das Raster, auf Desktops wird es erweitert.
Die Screenshots zeigen die Benutzeroberfläche auf Englisch.
Füge Cards, Tiles, Bilder oder eigene Komponenten ein.
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=mw83zxfs" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=mw83zxfs" 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
Die Spaltenanzahl ändert sich je nach Bildschirmbreite:
- Mobilgeräte (< 768px): 1 Spalte
- Tablet (768px - 1024px): maximal 2 Spalten
- Desktop (> 1024px): volle Spaltenanzahl
Props
Anzahl der Spalten pro Zeile. Zulässige Werte: 1 bis 4.