Une grille « CSS Grid » est un ensemble de lignes horizontales et verticales qui se croisent : les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes.
Depuis plusieurs années, les UI Designers utilisent des grilles pour faire leurs maquettes graphiques. Malheureusement cette façon de procéder n’avait jamais trouvé d’équivalent avec CSS. Historiquement, nous nous sommes toujours débrouillés avec des , des floats, des inline-block et plus récemment avec des flexbox. Cependant, aucune de ces techniques n’était réellement faite pour construire des gabarits à proprement dit. Il s’agissait même parfois de rustines / de hacks, toujours en attendant mieux.
C’est pourquoi, la spécification CSS Grid Layout (ou simplement Grid) était attendue depuis plusieurs années avec impatience. Elle jouit aujourd’hui d’un support navigateur plutôt bon, du coup c’est certainement le bon moment pour se lancer et créer vos premières mises en page avec.
Rappel sur CSS Grid
Le but de cet article est de signaler l’importance de CSS Grid dans la création de mises en page modernes et réactives.
Une page Web est normalement composée de régions / zones à placer sur des lignes, des colonnes ou bien les 2 à la fois. Là ou Flexbox permet de faire une mise en page uni-dimensionnelle (row OU column), Grid permet d’agir de manière bi-dimensionnelle (row ET column). C’est donc LA Technique idéale pour répondre à notre besoin. Je recommande vivement la lecture du guide complet sur la spécification au préalable ✔.
Nouvelles Fonctionnalités de CSS Grid
En plus des ses fameuses propriétés, le CSS Grid offre des nouvelles propriétés pour assurer en plus la réactivité des layout des pages web.
Subgrid
Le CSS Grid à ajouté la valeur subgrid pour les propriétées colonnes de modèle de grille:grid-template-columns et les lignes de modèle de grille: grid-template-rows.
Lorsque vous ajoutez display: grid à un conteneur de grille, seuls les enfants directs deviennent des éléments de grille et peuvent ensuite être placés sur la grille que vous avez créée. Les enfants de ces éléments s’affichent dans un flux normal.
Vous pouvez « imbriquer » des grid en transformant un élément de grille en conteneur de grid. Ces grilles sont cependant indépendantes de la grille parent et les unes des autres, ce qui signifie qu’elles ne prennent pas leur dimensionnement de piste à partir de la grille parent.
Cela rend difficile l’alignement des éléments de grille imbriqués avec la grille principale.
Si vous définissez la valeur de subgrid sur les grid-template-columns, les grid-template-rows ou les deux, au lieu de créer une nouvelle liste de pistes, la grille imbriquée utilise les pistes définies sur le parent.
Par exemple, si vous utilisez grid-template-columns: subgrid et que la grille imbriquée s’étend sur trois pistes de colonnes du parent, la grille imbriquée aura trois pistes de colonnes de la même taille que la grille parent. Les écarts sont hérités mais peuvent également être remplacés par une valeur d’écart (gap) différente. Les noms de ligne peuvent être transmis du parent à la sous-grille, et la sous-grille peut également déclarer ses propres noms de ligne.
Vous pouvez explorer plus de détails sur l’utulisation de la propriété subgrid.
Fr Unités Améliorées
Une nouvelle unité a été introduite au CSS Grid Layout. Cette unité flexible : l’unité Fr. Fr est une unité fractionnaire et 1fr correspond à 1 partie de l’espace disponible.
Ci-dessous quelques exemples ‘utilisation de l’unité fr . Les éléments de grille dans ces exemples sont placés sur la grille avec des zones de grille.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 200px 100px;
grid-template-areas:
"head head2 . side"
"main main2 . side"
"footer footer footer footer";
}
Tête
Tête 2
Principal
Principal 2
Côté
Bas de page
Si on modifie la valeur de la propriété grid-template-columns avec différentes valeurs fr
soit:
grid-template-columns: 1fr 1fr 40px 20%;
Tête
Tête 2
Principal
Principal 2
Côté
Bas de page
Ainsi, on peut remarquer qu’il est possible de mélanger plusieurs unités (px, %,pt,fr…) dans une seule propriétés. Les valeurs ayant l’unité fr seront divisées entre l’espace qui reste après ce qui est pris par les autres unités.
Par exemple, si vous avez une grille à 4 colonnes comme dans l’extrait suivant, la 1ère colonne fera 300px, la seconde 80px (10% de 800px), les 3ème et 4ème colonnes feront 210px (chacune occupant la moitié de l’espace restant ) :
main {
width: 800px;
display: grid;
grid-template-columns: 300px 10% 1fr 1fr;
/* 300px 80px 210px 210px */
grid-template-rows: auto;
}
Compatibilité des Navigateurs
Les propriétés et les valeurs nouvellement introduit par le grid css ne sont pas forcement tous compatible avec les différents navigateurs.
Le site caniuse.com resume la compatibilité de chaque propritée: subgrid ou la fraction fr
Conclusion
Le module de disposition de grille CSS excelle dans la division d’une page en régions principales ou dans la définition de la relation en termes de taille, de position et de couche entre les parties d’un contrôle construit à partir de primitives HTML.
Les dernières fonctionnalités introduites dans La grille CSS marquent une révolution dans l’univers de mise en page via CSS.
Laisser un commentaire