Aligner les enfants dans la grille

Il s'agit ici de comprendre comment aligner les éléments enfants dans leur cellule respective. Chaque cellule est plus grande que son contenu pour mieux visualiser nos exemples.

Aligner horizontalement les enfants dans leur cellule

L’alignement horizontal (le long des axes des colonnes) des enfants dans les cellules de la grille se gère avec la propriété justify-items déjà utilisée dans la partie consacrée au module Flexbox.
Sa valeur par défaut est stretch qui permet aux enfants de s’agrandir pour occuper toute la place disponible dans la cellule (la largeur des paragraphes s’étend sur toutes les cellules).

Les alignements sur l’axe vertical

C’est la propriété align-items qui nous permet de gérer les alignements des enfants sur l’axe vertical des cellules de la grille. À nouveau, les valeurs sont les mêmes qu’avec le module Flexbox.
Sa valeur par défaut de la propriété align-items est stretch. Elle permet à l’élément enfant de s’étirer et d’occuper toute la hauteur disponible dans la cellule.

Les alignements sur les deux axes

Les propriétés justify-items et align-items avec la valeur center permettent d'aligner les éléments enfants sur les deux axes des cellules.

Le module CSS Box Alignment Module Level 3 nous propose la syntaxe raccourcie place-items pour l’utilisation conjointe des propriétés align-items et justify-items. Attention, l’ordre des valeurs est strict : d’abord align-items et ensuite justify-items.
place-items: center center; et lorsque les deux valeurs sont identiques place-items: center; suffit.