Grid Layout > Comprendre

Intro

Le module CSS Grid Layout Module Level 1 est toujours en travaux mais même s’il n’est pas encore entièrement finalisé, il est parfaitement reconnu par tous les navigateurs modernes, comme l’atteste le site de référence Can I Use.

Nous pouvons donc l’utiliser sans aucune restriction dans le développement de nos sites web.

Le vocabulaire des grilles

Grid container - Grid Item

= le conteneur de grille.
On l'obtient en utilisant la propriété display: grid .
Tous les éléments DIRECTS inclus seront des éléments enfants de la grille et seront des Grid Item .Les petits enfants du conteneur de grille ne sont pas affectés par la notion de grille.

Grid Lines

= lignes de grille qui délimitent 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.

Grid Area

= zone de grille.
Est constituée d’une ou de plusieurs cellules de grille. 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.