Affichage Grille

Le concept de Grille apparait mais n'est pas encore complètement implanté dans tous les navigateurs.

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface.

Une grille 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. Les fonctionnalités sont les suivantes :

Pistes à taille fixe ou variable : 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.
Placement des éléments : 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.
Création de pistes supplémentaires pour du contenu : Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».
Contrôle de l'alignement : On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.
Contrôle des contenus qui se chevauchent : 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.

Syntaxe

Display:grid

Pour le conteneur, la syntaxe est :

Display: grid | inline-grid

Tous les enfants directs sont maintenant des éléments de grille.

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.

syntaxe

Exemple

On peut définir une taille pour les pistes de la grille implicite grâce aux propriétés grid-auto-rows et grid-auto-columns.

Les gouttières entre les cellules sont définies à l'aide des propriétés grid-column-gap et grid-row-gap, ou de la propriété raccourcie grid-gap.

Unité : fr

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille.

Fonctions

repeat()

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies.

syntaxe

Exemple

minmax()

Cela permet de définir une valeur minimum et une valeur maximum.

minmax(valeur_min , valeur_max)

Exemple : grid-auto-rows: minmax(100px, auto);

La hauteur deslignes sera au minimum de 100px et si la hauteur doit augmenter, elle s'adaptera au contenu (auto).

Organisation de la grille

Chaque élément peut être placé en fonction des colonnes et des lignes en indiquant l'endroit où il commence et soit l'endroit où il finit, soit sa taille.

grid-column: colonne_début / colonne_fin

grid-column: colonne_début / span nombre_de_colonnes

grid-column: span nombre_de_colonnes / colonne_fin

syntaxe