# Grid

Les colonnes qui s'adaptent à la largeur : chacune a une largeur minimale et, en dessous, se déroule. Elle ne dépasse jamais l'écran.

## Playground

```html
<div class="feitio-grid" data-gap="1" style="--feitio-grid-min: 6rem"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span><span class="lay-box">4</span><span class="lay-box">5</span></div>
```

## Quand l'utiliser

-   Quand il y a un espace entre les éléments : l'espace appartient au parent, et n'est qu'un pas de l'échelle.

## Quand ne pas l'utiliser

-   **Pour le remplissage interne d'un composant :** il est prêt.
-   **Avec une marge manuscrite à côté :** jamais ; la vérification l'échoue.

## Exemples

### Grille

Six pièces d'au moins 9rem, à `space-3`.

Afficher le code

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

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

### Une autre colonne minimale

Avec `--feitio-grid-min: 6rem` plus de colonnes tiennent ; avec 15rem, moins. Le nombre de colonnes vient de la largeur, jamais d’un nombre fixe.

Afficher le code

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

### Une cellule vide

Quand un élément manque, les autres remontent à sa place. Pour garder la place (une carte qui doit encore arriver), mettez un espace marqué du pointillé, qui dans Feitio veut dire « ici, c’est un espace ».

Afficher le code

```html
<div class="feitio-grid" data-gap="3">
  <article>…</article>
  <article>…</article>
  <div class="slot" aria-hidden="true"></div>  <!-- o tracejado: um espaço -->
  <article>…</article>
</div>
```

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-grid"`

obligatoire

Mise en page.

`data-gap`

`1` à `7`

L'espace entre les éléments. Dans React, aucune autre valeur ne compile.

`min`

Une largeur

La largeur minimale de chaque colonne.

Les règles et un formulaire complet construit avec les trois sont dans [Mise en page](/fr/dev/layout/).