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.

Sur cette page

Playground

12345

Espace (gap)

Colonne minimale

Éléments

Fond

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

Pièce 1Pièce 2Pièce 3Pièce 4Pièce 5Pièce 6

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>

React

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

12345678

1234

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>

12vide345

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.