# Layout

Stack, Inline und Grid: Der Abstand zwischen den Elementen stammt vom Elternkontext und kann nur ein Schritt der Skala sein.

## Warum

Manuell festgelegte Abstände an jeder Stelle führen außerordentlich aus der Skale heraus: ein zusätzlicher Rand hier, ein nuller dort. In Feitio gehört der Abstand zwischen den Elementen immer dem Elternkontext an und kann nur ein Schritt der Skala sein. Drei Komponenten kümmern sich darum, und niemand schreibt wieder Margin, Gap oder Padding.

## Drei

### Stapel

Stacks die Elemente übereinander mit dem gleichen Abstand zwischen allen von ihnen.

Code anzeigen

```html
<div class="feitio-stack" data-gap="3">
  …
</div>
```

```jsx
<Stack gap={3}>
  …
</Stack>
```

### Inline

Legt Elemente nebeneinander zusammen und umwickelt die Zeile, wenn sie nicht passen.

Code anzeigen

```html
<div class="feitio-inline" data-gap="2">
  …
</div>
```

```jsx
<Inline gap={2}>
  …
</Inline>
```

### Raster

Spalten, die der Breite entsprechen: jede hat eine Mindestbreite und, darunter, wickelt zur nächsten Reihe. Es geht nie über den Bildschirm hinaus.

Code anzeigen

```html
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>
```

```jsx
<Grid gap={3} min="9rem">
  …
</Grid>
```

## Zusammen

Ein ganzes Formular ohne einzigen Rand: der äußere Stack trennt Felder mit `space-5`, der innere verbindet Label, Hinweis und Feld mit `space-1`, und Inline richtet die Buttons aus.

```jsx
<Stack gap={5}>
  <Stack gap={1}>
    <Label htmlFor="nome">Nome do lembrete</Label>
    <Hint id="nome-dica">Aparece na notificação</Hint>
    <TextInput id="nome" aria-describedby="nome-dica" />
  </Stack>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>
```

## Attribute

Attribut

Werte

Zum Zweck

`gap`

`1` bis `7` (Standard: 4)

Der Abstand zwischen den Elementen, ein Schritt der Skala. Kein anderer Wert wird akzeptiert.

`align`

`"start"`, `"center"`

In Stack: Wie die Elemente horizontal ausgerichtet werden.

`justify`

`"between"`, `"end"`

In Inline: wie sich Teile entlang der Linie verteilen.

`min`

eine Breite, wie `"15rem"`

In Grid: die Mindestbreite jeder Spalte. Darunter wird die Spalte umgewickelt.

In React hat `gap` den Typ `1 | 2 | 3 | 4 | 5 | 6 | 7`: ein Wert außerhalb der Skala kompiliert nicht einmal.

## Regeln

-   **Raum gehört zum Elternelement.** Ein Komponente hat keinen äußeren Margin; Stack, Inline oder Grid entscheiden darüber den Abstand zu seinem Nachbarn.
-   **Kein leerer Spacer** zwischen zwei Elementen. Raum lebt in der Lücke des Elternelements.
-   **Innere Padding gehört zur Komponente:** die Padding eines Buttons oder Blocks ist fertiggestellt und wird nicht von Hand geändert.
-   **Eine automatische Prüfung** scheitert an Margin, Gap oder Padding, die von Hand im Code geschrieben wurden, der von jemandem verwendet Feitio.

Alle drei funktionieren auf dieser Seite in reinem CSS und gibt es auch als Astro- und React-Komponenten (`@feitio/astro`, `@feitio/react`).