CSS Grid



Informations

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité "fr" créée à cet effet

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété z-index. La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

Les propriétés "grid-template-columns" et "grid-template-rows" permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille.

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille.

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple.



cloudLien vers MDN web docs videogame_assetgrid garden videogame_assetgriddy

Compatibilité des navigateurs

source caniuse.com mise à jour le: 16/05/2018



CheatSheet

grid-column-start

Définit la position de début de la grille sur les colonnes de la grille

grid-column-end

Définit la position de fin de la grille sur les colonnes de la grille

Elle doit être un nombre entier. Exemple : grid-column-end : 5

Au lieu de définir un élément de la grille basé sur les positions de début et de fin des lignes de la grille, vous pouvez le définir en fonction de la largeur de colonne désirée à l'aide du mot clé span. Gardez à l'esprit que span fonctionne uniquement avec des valeurs positives.
grid-column

Permet de combiner grid-column-start & grid-column-end

Par exemple :grid-column : 2 / 5 définira l'élément de la grille à partir de la 2ème ligne verticale de la grille et se terminera à la 5ème ligne de la grille.

Fonctionne aussi avec span

grid-area

Raccourcis utilisé pour taper à la fois grid-column et grid-row, pour cela il suffit de mettre les quatres valeurs entre des "/" .

order
Par défaut, tous les éléments de la grille ont order à 0, mais cela peut être défini sur n'importe quelle valeur positive ou négative, c'est similaire à z-index.
template-grid-columns

Définit le dimensionnement et le nom des colonnes de la grille

template-grid-columns n'accepte pas seulement les valeurs en pourcentage, mais aussi les unités de longueur comme pixels et ems. Vous pouvez même mélanger différentes unités.

repeat

S'intégre à template-grid-columns ou template-grid-rows et permet de créer des colonnes ou des lignes en les répétant

Par exemple : template-grid-columns : repeat (5, 20%). Ici, nous répéterons 5 fois 20% afin de créer 5 colonnes de 20%.

grid-row-start

Fonctionne exactement comme les colonnes sauf qu'ici on utilise la valeur row (lignes), qui définit la position de début de la grille sur les lignes de la grille

grid-row-end

Définit la position de fin de la grille sur les lignes de la grille

grid-row

Permet de combiner grid-row-start & grid-row-end

Par exemple :grid-row : 3 / 4 définira l'élément de la grille à partir de la 3ème ligne horizontale de la grille et se terminera à la 4ème ligne de la grille.

Fonctionne aussi avec span

template-grid-rows

Définit le dimensionnement et le nom des lignes de la grille

template-grid-rows n'accepte pas seulement les valeurs en pourcentage, mais aussi les unités de longueur comme pixels et ems. Vous pouvez même mélanger différentes unités.

fr

Chaque unité fr alloue une partie de l'espace disponible. Par exemple, si deux éléments sont définies respectivement avec 1fr et 3fr, l'espace est divisé en 4 parts égales, le premier élément occupe 1/4 et le deuxième élément 3/4 de l'espace disponible.

Lorsque les colonnes sont définies avec des pixels, des pourcentages ou des ems, toutes les autres colonnes définies avec fr se répartiront l'espace restant.

grid-template

Raccourcis utilisé pour définir à la fois template-grid-rows & template-grid-columns

Le "/" permet de spéparer les deux valeurs