Faire des mises en pages avancées a toujours été une gageure en CSS. Nous avons utiliser les tableaux, puis des dizaines de div, et tout un tas d'astuces et de bidouilles plus ou moins élégantes. Heureusement les choses changent enfin ! Flexbox est maintenant bien rependue pour agencez nos blocs en ligne ou en colonne, mais il manquait une norme pour réaliser des mises en pages complexes. C'est l'objectif de CSS Grid qui commence à arriver dans nos navigateurs. Découvrons la syntaxe et les possibilités de cette spécification en cours de standardisation au W3C
18. Qu’est ce qu’il se passe lorsqu’on n’a plus de place ?
Comment je gère les tailles des colonnes ?
Quid du colspan et rowspan ?
Laquelle de ces solutions je prends ?
Quels sont les effets de bords ?
Etc.
40. fr : fraction de l’espace restant
min-content : taille de l'élément le plus petit
max-content : taille de l'élément le plus grand
fit-content : équivalent de “auto”
Nouvelles unités
(uniquement pour Grid Layout)
43. justify-xxx : Sens principal Horizontal
align-xxx : Sens secondaire Vertical
44. xxx-self : Aligne un bloc dans son parent
xxx-items : Alignement par défaut des blocs dans la grille
xxx-content : Alignement de la grille dans son parent
45. center : aligne le bloc au milieu de l'axe
start : aligne le bloc au début de l'axe (gauche ou haut)
end : aligne le bloc à la fin de l'axe (droite ou bas)
59. Implémentation dans Firefox (et nouvelles syntaxe dans Edge ?)
Sous-grilles imbriquées avec syntaxe simplifiée
Répéter des configuration de Cellules
Cellules nomées
69. Syntaxe de base super simple (une fois les alignements compris…)
Syntaxe avancée très puissante
Un seul conteneur global
Facile de ré-agencer les blocs
Nouvelles unités de tailles super pratiques