Le displayType "grid"

Props spécifiques au grid

Les props propres au displayType="grid" sont les suivantes, et sont donc sans effet en displayType="flex" :

Props	Type ou valeurs autorisées	Valeur par défaut
gridTemplateColumns	string	none
gridTemplateRows	string	none
gridGap	none, xs, sm, md, lg, xl	none

• La props gridTemplateColumns permet de remplir la propriété CSS grid-template-columns : pour créer une grille de 4 colonnes dont la première doit prendre le plus d'espace possible (sans écraser les 3 autres colonnes), on pourra donc définir gridTemplateColumns="1fr auto auto auto". Plus de détails sur la propriété CSS grid-template-columns.
• La props gridTemplateRows permet de remplir la propriété CSS grid-template-rows : pour créer une grille de 3 lignes dont la dernière doit prendre le plus d'espace possible (sans écraser les 2 autres lignes), on pourra donc définir gridTemplateRows="auto auto 1fr". Plus de détails sur la propriété CSS grid-template-rows.
• La props gridGap permet de remplir la propriété CSS gap : voir la doc sur le GridGap pour plus de détails.

Alignement des enfants

Une fois votre grille créée, il est indispensable de réfléchir à l'alignements des enfants à l'intérieur de leurs "cellules" respectives. Les enfants peuvent être alignés sur deux dimensions :

• Sur l'axe horizontal (x) avec justifyItems, qui permet de remplir la propriété CSS justify-items ;
• Sur l'axe vertical (y) avec alignItems, qui permet de remplir la propriété CSS align-items commune au displayType="flex".

Props	Type ou valeurs autorisées	Valeur par défaut
justifyItems	stretch, center, start, end	center
alignItems	stretch, center, flex-start, flex-end, baseline	flex-start

Les valeurs du justifyItems

• Le stretch étire l'enfant sur toute la largeur de la cellule.
• Le center centre horizontalement l'enfant dans la cellule.
• Le start place l'enfant sur la gauche de la cellule.
• Le end place l'enfant sur la droite de la cellule.

Les valeurs du alignItems

• Le stretch étire l'enfant sur toute la hauteur de la cellule.
• Le center centre verticalement l'enfant dans la cellule.
• Le flex-start place l'enfant en haut de la cellule.
• Le flex-end place l'enfant en bas de la cellule.
• Le baseline aligne les enfants à partir du texte qu'ils contiennent : avec des textes de différentes tailles, cette propriété est particulièrement utile pour que les différents textes semblent placés sur une même ligne de lecture.

caution

Ne pas confondre la props alignItems citée ci-dessus (qui contrôle l'alignement des enfants) avec la props align tout court (qui contrôle l'alignement de tout le composant InternalGrid par rapport à son parent).

Exemples

InternalGrid en justifyItems="center"

Il s'agit de la valeur par défaut du justifyItems.

Démo 🎉

Tyrion

Cersei

Jaime

Jon

Daenerys
Targaryen

Code ⌨️

<InternalGrid

displayType="grid"

gridTemplateColumns="auto auto auto"

gridTemplateRows="auto auto"

gridGap="md"

>

<p>Tyrion</p>

<p>Cersei</p>

<p>Jaime</p>

<p>Jon</p>

<p>Daenerys Targaryen</p>

</InternalGrid>

InternalGrid en justifyItems="stretch"

Démo 🎉

Tyrion

Cersei

Jaime

Jon

Daenerys
Targaryen

Code ⌨️

<InternalGrid

displayType="grid"

justifyItems="stretch"

gridTemplateColumns="auto auto 1fr"

gridTemplateRows="auto auto"

gridGap="md"

>

<p>Tyrion</p>

<p>Cersei</p>

<p>Jaime</p>

<p>Jon</p>

<p>Daenerys Targaryen</p>

</InternalGrid>

InternalGrid en alignItems="baseline"

Démo 🎉

Tyrion

Cersei

Jaime

Jon

Daenerys
Targaryen

Code ⌨️

<InternalGrid

displayType="grid"

justifyItems="stretch"

gridTemplateColumns="auto 1fr auto"

gridTemplateRows="auto auto"

gridGap="md"

alignItems="baseline"

>

<p>Tyrion</p>

<p>Cersei</p>

<p>Jaime</p>

<p>Jon</p>

<p>Daenerys Targaryen</p>

</InternalGrid>