# ColumnLayout

Das ColumnLayout organisiert Inhalte in Spalten. Sowohl die Anzahl der Spalten als auch deren Größe lassen sich flexibel für verschiedene Breakpoints definieren

## Guidelines

# Grundlagen

## Best practices

- Zu viele Spalten können den Content überladen und unübersichtlich machen. In
  der Regel reichen maximal 4 Spalten aus.
- Integriere bei Bedarf mehrere ColumnLayouts ineinander, um Inhalte optisch zu
  gruppieren.
- Wähle die Spaltenbreiten bewusst: Einheitliche Breiten schaffen ein
  harmonisches Layout, während unterschiedliche Breiten den Fokus des Users auf
  breitere Inhalte lenken.
- Verwende das ColumnLayout in Kombination mit der
  [Section](/04-components/structure/section/overview), um einfach
  übersichtliche Layouts zu erstellen.

# Verwendung

Verwende ein ColumnLayout, um ...

- das Layout eines Dashboards festzulegen.
- Formularfeldern eine klare Struktur zu geben.
- Inhalte auf unterschiedlichen Geräten übersichtlich darzustellen.

---

# Verhalten

## Responsive layout

Das ColumnLayout folgt folgenden Breakpoints:

- Größe `s` bis 550 Pixel Breite: `[1]`
- Größe `m` bis 850 Pixel Breite: `[1, 1]`
- Größe `l` ab 851 Pixel Breite: `[1, 1, 1]`

Beachte, dass die Breakpoints sich nicht auf die Bildschirmgröße des Endgeräts
beziehen. Sie beziehen sich auf die Breite des Containers, in dem das
ColumnLayout verwendet wird. Für jeden Breakpoint kann sowohl die Anzahl der
Spalten als auch deren Größenverteilung individuell festgelegt werden (siehe
Overview). So bricht das Layout automatisch um, wenn es eine bestimmte Breite
unterschreitet.