Créer une grille et définir des pistes de grille

Dans la leçon précédente, nous avons vu qu’il suffisait d’appliquer un display : grid à un élément pour le transformer en un élément grille conteneur et ainsi définir notre grille.

Notre grille ainsi créée ne va par défaut être composée que d’une seule colonne et d’autant de rangées qu’il y a d’éléments de grille.

See the Pen Cours HTML CSS 16.2.1 by Pierre (@pierregiraud) on CodePen.

Ici, on dit que les pistes sont définies de manière implicite (car elles sont créées par la grille elle-même). Nous allons cependant également pouvoir définir les pistes de nos grilles nous-mêmes. Dans ce cas-là, on dira que les pistes ont été définies explicitement.

Nous allons apprendre dans cette leçon à définir explicitement le nombre et la taille des pistes de nos grilles ainsi qu’à maitriser le comportement des pistes définies implicitement.

 

Définir explicitement les colonnes et les rangées d’une grille

Pour définir explicitement le nombre et les dimensions de colonnes et de rangées de notre grille, nous allons pouvoir utiliser les propriétés grid-template-columns et grid-template-rows.

Ces propriétés vont pouvoir accepter n’importe quelle valeur de type dimension ainsi qu’un type de valeurs spécifique aux grilles : le fr qui représente une fraction de l’espace disponible dans le conteneur et qui va donc nous permettre de définir la taille d’une piste en fonction des autres.

Le nombre de valeurs passées à grid-template-columns et à grid-template-rows va déterminer le nombre de colonnes et de rangées de notre grille.

See the Pen Cours HTML CSS 16.2.2 by Pierre (@pierregiraud) on CodePen.

Ci-dessus, nous avons une grille qui contient 5 éléments. Nous créons trois colonnes dans notre grille avec grid-template-columns : 1fr 2fr 3fr. Dans ce cas, la deuxième colonne occupera deux fois plus d’espace que la première tandis que la troisième occupera trois fois plus d’espace que la première.

Notez qu’on va également tout à fait pouvoir définir nos pistes en utilisant un mélange de différents types d’unités.

See the Pen Cours HTML CSS 16.2.3 by Pierre (@pierregiraud) on CodePen.

Dans cet exemple, on crée à nouveau une grille à trois colonnes. Cette fois-ci, on demande à ce que notre première colonne occupe un espace de 200px en largeur. L’espace restant dans le conteneur sera ensuite partagé entre les deux autres colonnes : 1/3 de l’espace restant pour la deuxième colonne et les deux autres tiers pour la dernière colonne.

Nous allons encore pouvoir passer une fonction repeat() à grid-template-columns et à grid-template-rows pour créer rapidement plusieurs pistes aux caractéristiques similaires. Cette fonction va accepter deux valeurs : le nombre de pistes à créer ainsi que la taille de chaque piste.

See the Pen Cours HTML CSS 16.2.4 by Pierre (@pierregiraud) on CodePen.

Ici, on définit à nouveau trois colonnes dans notre grille. Chaque colonne occupera la même place. Notez qu’on va pouvoir utiliser la fonction repeat() pour définir des motifs. Notez également qu’on va pouvoir définir certaines pistes avec repeat() et certaines pistes individuellement.

See the Pen Cours HTML CSS 16.2.5 by Pierre (@pierregiraud) on CodePen.

Ici, on crée une première colonne qui va occuper une place de 100px en largeur puis on définit un motif de 2 colonnes à répéter 3 fois avec repeat(). A chaque fois, la première colonne aura une taille de 1fr et la seconde une taille de 2fr.

 

Règles de création et taille des pistes implicites

Dans les exemples ci-dessus, nous n’avons à chaque fois défini que les colonnes de notre grille et avons laissé la grille définir implicitement son nombre de rangées.

On dit qu’une piste est définie implicitement dès qu’elle n’a pas été créée avec grid-template-columns ou grid-template-rows.

Une grille va ainsi créer implicitement de nouvelles rangées ou de nouvelles colonnes dès qu’elle va devenir trop petite pour contenir un élément. Cela peut arriver dans deux situations différentes : si on a tenté de placer explicitement un élément en dehors de la grille ou si nos éléments possèdent trop de contenu pour que celui-ci rentre dans la grille.

Par défaut, les dimensions des pistes créées implicitement auront la valeur auto ce qui signifie que les pistes ajusteront leur taille selon leur contenu. On va pouvoir définir un autre comportement et une taille pour les pistes créées implicitement grâce aux propriétés grid-auto-rows et grid-auto-columns.

See the Pen Cours HTML CSS 16.2.6 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple ci-dessus, on crée une grille et on définit explicitement 3 colonnes avec grid-template-columns : 1fr 2fr 3fr. On ne précise pas de propriété grid-template-rows : les rangées vont donc être créées implicitement.

Nous allons donc renseigner une propriété grid-rows-auto pour maitriser la hauteur des rangées créées implicitement par la grille.

 

Définir un intervalle de tailles valides pour les pistes d’une grille

Les propriétés grid-template-columns, grid-template-rows, grid-auto-columns et grid-auto-rows vont également pouvoir accepter une fonction minmax() en valeur pour une ou plusieurs pistes.

La fonction minmax() va s’avérer très intéressante puisqu’elle va nous permettre de définir des bornes, c’est-à-dire un intervalle de dimensions valides pour nos pistes, que celles-ci aient été définies explicitement ou implicitement.

Nous allons passer deux valeurs à cette fonction qui vont correspondre à la borne basse et à la borne haute. Les types de valeurs acceptés par minmax() sont les suivantes :

• Une longueur en px par exemple ;
• Un pourcentage ;
• Une unité de fraction fr ;
• Le mot clef max-content qui va représenter la taille idéale de la piste c’est-à-dire la plus petite taille permettant d’afficher tout le contenu sur une ligne ;
• Le mot clef min-content qui va représenter la plus petite taille que le piste peut avoir sans que son contenu ne déborde (avec un contenu éventuellement sur plusieurs lignes) ;
• Le mot clef auto qui va laisser la piste s’adapter en fonction de son contenu et par rapport à son autre borne.

See the Pen Cours HTML CSS 16.2.7 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple précédent, on utilise grid-auto-rows : minmax(80px, auto) pour indiquer que les rangées créées implicitement ne peuvent pas faire moins de 80px de hauteur et doivent s’adapter à leur contenu si celui-ci est plus grand que la taille minimale.

On va également utiliser minmax() en valeur de notre propriété gris-template-columns pour indiquer que notre première colonne doit occuper une largeur minimum de 100px et maximum de 1fr.

Ici, dans le cas où la borne haute (1fr) s’avère plus petite que la borne basse (100px), alors elle sera ignorée et minmax() ne servira qu’à définir une taille minimale.