Nous pouvons donc l’utiliser sans aucune restriction dans le développement de nos sites web.
La spécification continue d'évoluer puisque le « Level 2 » est déjà disponible à l'état de brouillon avancé.
Qu'apporte Grid Layout par rapport aux autres?
Grid Layout est un véritable framework de positionnement à lui tout seul, conçu pour agencer vos pages web.
Meilleur que Flexbox?
Grid Layout et Flexbox sont à la fois différents et complémentaires.
Il existe une différence fondamentale entre Grid Layout et Flexbox:
la gestion des deux axes horizontaux et verticaux de façon simultanée. Flexbox n'est optimal que dans une seule direction, tandis que Grid Layout gère parfaitement les rangées tout autant que les colonnes.
Grid Layout a été conçu pour une prise en compte globale de la page, tandis que Flexbox est prévu pour agencer les composants internes et gérer leur fluidité.
= le conteneur de la grille et ses éléments enfants
Grid container
= le conteneur de grille.
On l'obtient en utilisant la propriété display: grid .
Grid Item
Tous les éléments DIRECTS inclus seront des éléments enfants de la grille et seront des Grid Item .Les petits-enfants d'un Grid Container ne participent pas au modèle de grille et conservent leur modèle de positionnement naturel (block, inline, ...).
Les éléments logiques
= éléments qui participent au contexte de grille sans être présents physiquement dans le code
Grid Lines
= ligne virtuelle horizontale ou verticale qui délimite la grille de mise en page.
Chaque grille possède quatre lignes de grille : deux horizontales et deux verticales. Ces quatre lignes matérialisent les bords extérieurs du conteneur de grille.
Grid Cell
= cellule de la grille.
C’est l’intersection entre une ligne et une colonne.
Grid Tracks
= pistes (ou chemins).
Ce sont les zones situées entre deux lignes horizontales ou verticales tout au long de la grille.
Plus simplement, une Grid Track horizontale représente une rangée, tandis qu'une Grid Track verticale représente une colonne.
Grid Area
= zone de grille.
Désigne l'emplacement dans lequel se positionne un Grid Item. Elle est constituée d’une ou de plusieurs cellules de grille et ne peut avoir qu'une forme rectangulaire. Nous allons pouvoir y placer des éléments HTML de contenu.
Grid Gap
= gouttières.
Sont les espaces situés entre les pistes de la grille. Cela va permettre d’espacer les éléments constitutifs de la grille. Notez bien que les gouttières sont des structures internes à la grille.Ces gouttières ne sont pas des marges ni des remplissages internes comme avec le modèle des boîtes.
