# Layout

Stack, Inline et Grid : l'espace entre les pièces provient du parent et ne peut être qu'une étape de l'échelle.

## Pourquoi

L'espace écrit à la main finit par être hors de proportion : une marge supplémentaire ici, un zéro là-bas. Dans Feitio, l'espace entre les éléments appartient toujours au parent et ne peut être qu'un pas de l'échelle. Trois composants s'en chargent, et personne n'écrira plus margin, gap ou padding.

## Les trois

### Empilement

Empilent les éléments, les uns sous les autres, avec le même espace entre tous.

Afficher le code

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

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

### En ligne

Place les éléments côte à côte et fait défiler la ligne lorsqu'ils ne tiennent pas.

Afficher le code

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

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

### Grille

Colonnes qui s'adaptent à la largeur : chacune a une largeur minimale et, en dessous, passe à la ligne suivante. Elle ne dépasse jamais de l'écran.

Afficher le code

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

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

## Ensemble

Un formulaire complet sans aucune marge : le Stack externe sépare les champs avec `space-5`, l'intérieur joint l'étiquette, l'astuce et le champ avec `space-1`, et Inline aligne les boutons.

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

## Attributs

Attribut

Valeurs

Pour quoi

`gap`

`1` à `7` (défaut : 4)

L'espace entre les éléments, un pas de l'échelle. Aucune autre valeur n'est acceptée.

`align`

`"start"`, `"center"`

Dans Stack : comment les éléments s'alignent horizontalement.

`justify`

`"between"`, `"end"`

Dans Inline : comment les éléments se répartissent le long de la ligne.

`min`

une largeur, comme `"15rem"`

En Grid : la largeur minimale de chaque colonne. En dessous, la colonne se réorganise.

Dans React, `gap` a le type `1 | 2 | 3 | 4 | 5 | 6 | 7` : une valeur hors échelle ne compile même pas.

## Règles

-   **L'espace appartient au parent.** Un composant n'a aucune marge externe ; le Stack, Inline ou Grid autour de lui décide de la distance avec son voisin.
-   **Aucun espacement vide** entre deux éléments. L'espace vit dans le gap du parent.
-   **L'espacement interne appartient au composant :** l'espacement d'un bouton ou d'un bloc est prêt et ne change pas à la main.
-   **Un contrôle automatique** échoue sur une marge, un gap ou un espacement écrits à la main dans le code de quiconque utilise Feitio.

Les trois fonctionnent sur cette page en CSS pur, et existent aussi en composants Astro et React (`@feitio/astro`, `@feitio/react`).