Télécharger le PDF du cours
Implémenté en 2017, le modèle des grilles est le modèle de disposition le plus récent et également le plus puissant que nous allons pouvoir utiliser en CSS.
La plupart des propriétés qu’on va pouvoir utiliser avec ce modèle vont ressembler aux propriétés des boites flexibles car ces deux modèles possèdent des principes de base communs.
Première définition du modèle des grilles et différences avec le flexbox
Le modèle des grilles est un modèle bidimensionnel, ce qui signifie que c’est un modèle qui va nous permettre de placer nos éléments en fonction de deux axes.
A la différence du modèle des boites flexibles, il n’est plus question ici d’axe principal et d’axe secondaire. Avec le modèle des grilles, les deux axes peuvent être manipulés de la même façon et vont être définis de cette manière :
- Un axe de bloc qu’on pourra également appeler (pour simplifier) axe vertical ou axe des colonnes ;
- Un axe en ligne ou axe horizontal ou encore axe des rangées.
Le modèle des grilles va donc s’avérer encore plus puissant que le modèle des boites flexibles qui était principalement unidimensionnel. Pour illustrer cela, imaginons la situation suivante :
See the Pen Cours HTML CSS 16.1.1 by Pierre (@pierregiraud) on CodePen.
Ici, j’ai défini un conteneur flexible dont l’axe principal est l’axe horizontal et qui possède 6 éléments flexibles. On définit une taille de base de 25% pour les éléments flexibles et on ne leur laisse pas la possibilité de s’agrandir ou dé rétrécir. En revanche, on donne le droit aux éléments d’aller à la ligne si nécessaire.
Nos éléments vont donc se placer les uns à côté des autres en partant du début du conteneur puis passer à la ligne. Avec les boites flexibles, il faut bien comprendre que chaque ligne agit comme un conteneur flexible indépendant.
Maintenant, imaginons que je souhaite aligner mon sixième élément flexible dans la ligne. Cela va être impossible avec le flexbox puisqu’il n’existe pas de propriété comme justify-self dans ce modèle.
Les grilles ne vont pas posséder cette limitation et nous permettre au contraire de définir l’alignement de chaque élément de grille selon l’axe de bloc et l’axe en ligne.
Autre limitation du flexbox par rapport aux grilles : le modèle des boites flexibles ne possède pas au jour d’aujourd’hui de propriété nous permettant de définir la taille des gouttières d’un élément.
Une gouttière est l’équivalent d’une marge mais uniquement entre deux éléments flexibles ou de grille et non pas entre un élément et son conteneur.
Avec le flexbox, on était donc obligé d’utiliser la propriété margin pour espacer les éléments flexibles les uns des autres puis d’utiliser des marges négatives sur le conteneur pour supprimer les marges créées entre le conteneur et les éléments.
See the Pen Cours HTML CSS 16.1.2 by Pierre (@pierregiraud) on CodePen.
Non seulement cette solution n’est pas optimale d’un point de vue propreté du code mais en plus le fait de rajouter des marges aux éléments flexibles risque de poser des problèmes dans la disposition des éléments puisque les marges externes vont venir s’ajouter à la taille des éléments.
Les grilles possèdent elles un set de propriétés qui va nous permettre de définir les gouttières des éléments d’une bien meilleure façon.
Vous pouvez donc retenir l’idée suivante pour définir s’il est préférable d’utiliser le flexbox ou les grilles : si vous avez besoin de contrôler la disposition des éléments selon les deux axes ou si vous avez besoin d’espacer précisément les différents éléments, alors utilisez les grilles. Sinon, utilisez le flexbox.
Notez par ailleurs que nous allons tout à fait pouvoir utiliser ces deux modèles conjointement et créer des dispositions de page complexes, un créant des éléments de grille qui vont contenir des éléments flexibles par exemple.
Élément grille conteneur et éléments de grille
Pour définir une grille, nous allons devoir appliquer un display : grid (la grille sera de type block) ou un display : inline-grid (la grille sera de niveau inline) à un élément.
L’élément auquel on applique un display : grid ou display : inline- grid va automatiquement devenir un élément grille conteneur.
De manière similaire au modèle des boites flexibles, tous les enfants directs de notre élément grille conteneur (et seulement les enfants directs) vont automatiquement être des éléments de grille.
Voici ci-dessous une première grille :
See the Pen Cours HTML CSS 16.1.3 by Pierre (@pierregiraud) on CodePen.
Ici, nous définissons un conteneur de grille avec display : grid. Les enfants directs du conteneur vont ainsi automatiquement devenir des éléments de grille. Ensuite, je définis les colonnes de ma grille avec grid-template-columns. N’essayez pas de tout comprendre tout de suite, nous aurons l’occasion d’étudier cette propriété par la suite.
Le vocabulaire des grilles
Les grilles sont des structures relativement complexes et il est donc essentiel de définir précisément les différentes parties d’une grille que nous allons être amenés à manipuler ou qui vont pouvoir nous être utiles.
Le premier concept à comprendre est qu’une grille est constituée de lignes ou de « droites » horizontales et verticales. Ces lignes ne sont pas visibles à l’écran et il faut donc se les imaginer.
Ces lignes vont être disposées de chaque côté des colonnes et des rangées d’une grille.
Note : Pour les grilles, nous parlerons de « rangées » pour définir les « rows » en anglais et non pas de lignes afin de ne pas les confondre avec les lignes que nous venons de définir ci-dessus.
Une grille possédant 3 colonnes et 2 rangées va donc posséder 4 lignes verticales et 3 lignes horizontales, une grille possédant 4 colonnes et 4 rangées va posséder 5 lignes verticales et 5 lignes horizontales et etc.
Ci-dessous, vous pouvez retrouver une représentation visuelle des lignes d’une grille. Ma grille contient ici 3 colonnes et 2 rangées. Les lignes verticales ont été dessinées en bleu et les lignes horizontales ont été dessinées en rouge.
L’espace entre deux lignes adjacentes est ce qu’on appelle une piste. Le terme piste sert donc tout simplement à désigner indifféremment une colonne ou une rangée dans une grille.
Ci-dessus, j’ai créé deux grilles composées de 3 colonnes et de 2 rangées. En jaune, j’ai colorié une piste pour chacune des deux grilles.
Une piste est composée de cellules. Tout comme pour les tableaux, une cellule correspond visuellement à l’espace délimité par deux lignes de colonnes et deux lignes de rangées adjacentes.
Ci-dessus, j’ai colorié 3 cellules de ma grille en jaune, vert et bleu.
Finalement, une zone de grille correspond à l’espace délimité par deux lignes de colonnes et deux lignes de rangées qui ne sont pas nécessairement adjacentes. Ci-dessous, j’ai dessiné une zone dans chacune de mes deux grilles (la première couvre 2 cellules et la deuxième couvre 4 cellules).
