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).
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 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.