---
title: Spalten
description: Responsives Rasterlayout zur Darstellung von Cards, Tiles und anderen Inhalten nebeneinander. Passt sich automatisch an die Bildschirmgröße an.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
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):
```mdx
```
## Weitere Spalten
Verwende `cols={3}` oder `cols={4}` für dichtere Layouts:
```mdx
...
```
## 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.
## Wie geht es weiter?
Alle verfügbaren Komponenten durchsuchen
Erfahren, wie Komponenten in MDX verwendet werden