alignement via display grid

Faire de l'alignement via display grid

2 options :

justify => X axe horizontal
align => Y axe vertical

justify-items | align-items

justify-content | align-content

justify-self | align-self

justify-item - align-item

La grille fait (ou pas) toute la largeur / hauteur du parent :

comment le contenu des cellules de grille va se comporter ?
par défaut, le contenu de la cellule va avoir la largeur / hauteur de la cellule (stretch)

justify-items: stretch* | center | start | flex-start | end | flex-end ;
align-items: stretch* | center | start | flex-start | end | flex-end ;

default

justify-items: center;

justify-items: center;
align-items:center;

justify-content - align-content

la grille ne fait pas toute la largeur / hauteur du parent :

=> où mettre l'espace restant en largeur et hauteur ?
via justify-content / align-content
ces propriétés ne fonctionnent pas si grille rempli son parent

justify-content: stretch | center | start* | flex-start | end | flex-end | space-between | space-round;
align-content: stretch | center | start* | flex-start | end | flex-end | space-between | space-round;

default

justify-content: center;
align-content: flex-end;

justify-content: space-between;
align-content: center;

justify-self - align-self

la grille ne fait (ou pas) toute la largeur / hauteur du parent :

éviter que toutes les cellules soient en stretch
via justify-self / align-self permet de changer l'alignement en X et Y dans la cellule

justify-self: stretch* | center | start | flex-start | end | flex-end ;
align-self: stretch* | center | start | flex-start | end | flex-end | baseline;

Faire de l'alignement via display grid

justify-item - align-item

default

justify-items: center;

justify-items: center; align-items:center;

justify-content - align-content

default

justify-content: center; align-content: flex-end;

justify-content: space-between; align-content: center;

justify-self - align-self

default

modification par cellule

justify-items: center;
align-items:center;

justify-content: center;
align-content: flex-end;

justify-content: space-between;
align-content: center;