# ColumnLayout

Das ColumnLayout organisiert Inhalte in Spalten, definierbar je Breakpoint.

```tsx
import {
  ColumnLayout,
  Content,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <LabeledValue>
    <Label>Vorname</Label>
    <Content>Max</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Nachname</Label>
    <Content>Mustermann</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Straße</Label>
    <Content>Musterstraße 1</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Ort</Label>
    <Content>32423 Minden</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Telefon</Label>
    <Content>+49 571 000000</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>E-Mail</Label>
    <Content>max@example.com</Content>
  </LabeledValue>
</ColumnLayout>
```

---

# Best Practices

- Verwende nicht zu viele Spalten, in der Regel höchstens vier.
- Wähle die Spaltenbreiten bewusst. Einheitliche Breiten wirken harmonisch,
  unterschiedliche lenken den Fokus auf breitere Inhalte.
- Kombiniere das ColumnLayout bei Bedarf mit einer
  [Section](https://flow.mittwald.de/04-components/structure/section). Das schafft übersichtliche
  Layouts.
- Verschachtele mehrere ColumnLayouts, um Inhalte optisch zu gruppieren.

---

# Responsive Layout

Die Breakpoints beziehen sich nicht auf die Bildschirmgröße des Endgeräts,
sondern auf die Breite des Containers, in dem das ColumnLayout verwendet wird.
So bricht das Layout automatisch um, sobald es eine bestimmte Breite
unterschreitet. Standardmäßig sind die Spalten wie folgt definiert:

- 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]`

In der Definition der Spaltenbreiten werden sowohl die Anzahl der Spalten als
auch ihr Größenverhältnis festgelegt. Eine Aufteilung wie `[1, 2, 1]` erzeugt
zum Beispiel drei Spalten, wobei die mittlere doppelt so breit ist wie die
beiden äußeren.

---

# Benutzerdefinierte Werte

Für jeden Breakpoint können eigene Werte für die Spaltenanzahl und deren
Größenverhältnis festgelegt werden. Wenn für einen größeren Breakpoint keine
eigenen Werte definiert sind, übernimmt er automatisch die Werte des
nächstkleineren Breakpoints. Standardwerte werden nur verwendet, wenn bei keinem
kleineren Breakpoint benutzerdefinierte Werte angegeben sind. Beispiel:

- Größe `s` bis 550 Pixel Breite: `[1]` (Default-Wert)
- Größe `m` bis 850 Pixel Breite: `[2, 1]` (benutzerdefinierter Wert)
- Größe `l` ab 851 Pixel Breite: `[2, 1]` (Wert von m geerbt)

In diesem Beispiel wurde für den Breakpoint `m` eine benutzerdefinierte
Spaltenaufteilung festgelegt. Der Breakpoint `l` übernimmt diese Aufteilung von
`m`, anstatt auf den Standardwert von `[1, 1, 1]` zurückzufallen. Da für den
Breakpoint `s` kein benutzerdefinierter Wert angegeben wurde, bleibt er beim
Standardwert von `[1]`.

```tsx
import {
  ColumnLayout,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<ColumnLayout m={[2, 1]}>
  <TextField isRequired>
    <Label>Straße</Label>
  </TextField>
  <TextField isRequired>
    <Label>Hausnummer</Label>
  </TextField>
</ColumnLayout>
```

---

# Ausgeblendete Spalten

Als Werte für die Breakpoints kann neben Zahlen auch `null` mitgegeben werden.
Das führt dazu, dass die entsprechende Spalte ausgeblendet wird. Hier wird
beispielsweise das Bild in der kleinsten Ansicht ausgeblendet:

```tsx
import {
  ColumnLayout,
  Text,
  Image,
  Section,
  Heading,
} from "@mittwald/flow-react-components";

<ColumnLayout s={[1, null]} m={[2, 1]} l={[5, 1]}>
  <Section>
    <Heading>Lorem ipsum dolor sit amet</Heading>
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Cumque eius quam quas vel voluptas, ullam
      aliquid fugit. Voluptate harum accusantium rerum ullam
      modi blanditiis vitae, laborum ea tempore, dolore
      voluptas. Earum pariatur, similique corrupti id
      officia perferendis. Labore, similique. Earum, quas
      in. At dolorem corrupti blanditiis nulla deserunt
      laborum! Corrupti delectus aspernatur nihil nulla
      obcaecati ipsam porro sequi rem? Quam.
    </Text>
  </Section>
  <Image
    src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    alt="mittwald"
  />
</ColumnLayout>
```

---

# Abstände

Die Abstände des ColumnLayout können in drei Stufen angepasst werden:

- s = 8px
- m = 16px
- l = 24px

Das Property `rowGap` steuert die Abstände zwischen den Zeilen (oben und unten),
`columnGap` die Abstände zwischen den Spalten (rechts und links) und `gap` setzt
alle Abstände gleichzeitig.

```tsx
import {
  ColumnLayout,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<ColumnLayout m={[1, 1]} rowGap="s" columnGap="l">
  <TextField isRequired>
    <Label>Vorname</Label>
  </TextField>
  <TextField isRequired>
    <Label>Nachname</Label>
  </TextField>
  <ColumnLayout s={[2, 1]} columnGap="m">
    <TextField isRequired>
      <Label>Straße</Label>
    </TextField>
    <TextField isRequired>
      <Label>Hausnummer</Label>
    </TextField>
  </ColumnLayout>
  <TextField isRequired>
    <Label>Ort</Label>
  </TextField>
</ColumnLayout>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `columnGap` | `GapSize` | - | Size of the column gap between the content blocks inside the column layout. |
| `elementType` | `"div" \| ExoticComponent<{}> \| "ul"` | - | The HTML element or React component rendered as the elements root. |
| `gap` | `GapSize` | `"m"` | Size of the row and column gap between the content blocks inside the column layout. |
| `l` | `(number)[]` | - | Column layout for container size l. |
| `m` | `(number)[]` | - | Column layout for container size m. |
| `rowGap` | `GapSize` | - | Size of the row gap between the content blocks inside the column layout. |
| `s` | `(number)[]` | - | Column layout for container size s. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |