Télécharger le PDF du cours
Dans cette leçon, nous allons apprendre à positionner les éléments de grille dans une grille.
Les fondamentaux du positionnement des éléments de grille
Les éléments de grille vont être positionnés à partir des lignes invisibles créées automatiquement par la grille. Pour rappel, ces lignes vont se trouver de chaque côté des différentes pistes d’une grille. Une grille possédant 3 colonnes et 2 rangées va ainsi disposer de 4 lignes verticales et de 3 lignes horizontales.
Dans l’illustration ci-dessous, j’ai tracé en rouge les différentes lignes d’une telle grille qui possède ici 5 éléments :
Ces lignes vont par défaut être numérotées dans chacun des deux axes. Elles vont donc posséder un ordre sur lequel on va pouvoir se baser pour positionner nos éléments de grille.
La numérotation va dépendre du sens de l’écriture du document. Pour un langage qui se lit de gauche à droite, par exemple, la ligne tout à gauche sera la ligne n°1, celle à sa droite sera la ligne n°2 et etc. dans l’axe de bloc. De même, la ligne tout en haut sera la n°1, celle en dessous la n°2 et etc. dans l’axe en ligne.
Pour positionner les éléments de grille dans la grille, nous allons pouvoir indiquer 4 lignes : de lignes de départ (horizontal / vertical) à partir desquelles l’élément doit être placé et deux lignes d’arrivée (horizontal / vertical) où l’élément doit finir.
Nous allons donc indiquer une surface qu’un élément doit couvrir et, en même temps qu’on définit son positionnement, définir de facto la taille de l’élément. Cette façon de faire est différente de ce qu’on a pu voir jusqu’à présent et va imposer aux éléments de grille de couvrir toujours un nombre entier de cellules.
Ce que vous devez bien comprendre ici est que la définition des tailles / dimensions va se faire au moment où on définit les pistes de notre grille. Pour cette raison, il faudra bien définir au départ si on veut créer une grille à 3, 6, 12, etc. colonnes et également bien définir le comportement des rangées.
Ensuite, nous n’allons faire que placer des éléments dans la grille. Fonctionner comme cela peut sembler contraignant mais c’est au final une excellente méthode pour organiser ses éléments et créer des designs complexes puisque toutes les contraintes se font sur la grille et cela va nous éviter d’avoir à envisager toutes les situations de comportement non voulu des différents éléments.
Positionner des éléments de grille en pratique
Par défaut, les éléments de grille vont se positionner à la suite les uns des autres selon le sens de l’écriture du document. Chaque élément va occuper une cellule, c’est-à-dire ne va s’étendre que sur une rangée et sur une colonne.
Pour positionner manuellement (ou explicitement) les éléments dans la grille, nous allons pouvoir utiliser les propriétés suivantes :
grid-column-start: Indique la ligne de départ de l’élément selon l’axe de bloc (ligne verticale) ;grid-column-end: Indique la ligne de fin de l’élément selon l’axe de bloc (ligne verticale) ;grid-row-start: Indique la ligne de départ de l’élément selon l’axe en ligne (ligne horizontale) ;grid-row-end: Indique la ligne de fin de l’élément selon l’axe en ligne (ligne horizontale) ;grid-area: Indique une zone de grille dans laquelle l’élément doit de placer.
Nous allons également pouvoir utiliser les versions raccourcies grid-column, grid-row.
Positionner les éléments de grille en utilisant les lignes des grilles
Utiliser la numérotation des lignes pour placer les éléments
Nous allons déjà pouvoir passer un chiffre aux propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.
Le chiffre passé va indiquer le numéro de la ligne où l’élément de grille doit commencer (pour les propriétés -start) ou la ligne où il doit s’arrêter (pour les propriétés -end.
Commençons avec un exemple simple d’une grille possédant 5 éléments tous positionnés explicitement :
See the Pen Cours HTML CSS 16.3.1 by Pierre (@pierregiraud) on CodePen.
Ici, on indique que notre premier élément doit de positionner à partir de la première ligne verticale et couvrir l’espace jusqu’à la troisième ligne verticale. L’élément sera également compris entre la première et la deuxième ligne horizontale.
Notre deuxième élément devra se positionner entre la première et la deuxième ligne verticale et entre la deuxième et la troisième ligne horizontale.
On demande à l’élément 3 de se positionner entre la troisième et la quatrième ligne verticale et entre la première et la deuxième ligne horizontale.
Notre quatrième élément de grille va se placer entre la première et la troisième ligne verticale et entre la troisième et la quatrième ligne horizontale.
Finalement, notre cinquième et dernier élément de grille va recouvrir l’espace entre la troisième et la quatrième ligne verticale et entre la deuxième et la quatrième ligne horizontale de la grille.
Notez qu’on ne va pas être obligé de préciser les 4 propriétés pour positionner un élément dans une grille. Pour être tout à fait précis, seule une des deux propriétés grid-column-start et grid-row-start est strictement nécessaire.
Attention cependant : si certaines propriétés sont omises pour certains éléments mais précisées pour d’autres, alors les éléments dont les propriétés ont été précisées viendront se placer avant les autres dans la grille et cela peut décaler les autres éléments.
En omettant l’une des deux propriétés grid-column-start ou grid-row-start, l’élément sera positionné selon sa position par défaut par rapport à l’axe non défini.
En omettant les propriétés grid-column-end et / ou grid-row-end, l’élément suivra son comportement par défaut qui est de n’occuper qu’une piste dans l’axe non défini.
Pour le moment, contentons-nous simplement d’omettre les propriétés -end lorsque l’élément n’est positionné que sur une piste. Nous verrons les cas de positionnement plus complexes plus tard.
See the Pen Cours HTML CSS 16.3.2 by Pierre (@pierregiraud) on CodePen.
Finalement, notez également qu’on va pouvoir placer un élément à partir de la fin de la grille en indiquant des numéros de lignes négatifs. Dans ce cas, -1 correspond à la dernière ligne définie explicitement, -2 à l’avant dernière etc. En pratique, cette notation est très peu utilisée et va répondre à des besoins très spécifiques.
Nommer les lignes pour positionner les éléments
Jusqu’à présent, nous nous sommes contentés d’utiliser le système de numérotation des lignes créé automatiquement par les grilles.
Nous allons également pouvoir nommer nos lignes pour pouvoir ensuite les manipuler plus facilement.
Pour cela, nous allons devoir indiquer le nom des lignes entre crochets dans la définition des pistes de la grille avec les propriétés grid-template-columns et grid-template-rows que nous avons étudié précédemment.
Reprenons notre grille précédente et nommons des lignes :
See the Pen Cours HTML CSS 16.3.3 by Pierre (@pierregiraud) on CodePen.
Ici, ma grille possède à nouveau 3 colonnes et 3 rangées, donc 4 lignes verticales et 4 lignes horizontales. Ici, vous devez bien comprendre que l’on va à la fois nommer les lignes et définir nos pistes avec les propriétés grid-template-columns et grid-template-rows.
Regardons de plus près la déclaration relative à grid-template-columns : je commence par donner un nom à ma première ligne, puis je définis la taille de ma première colonne, puis je passe le nom de ma deuxième ligne, puis la taille de ma deuxième colonne et etc. jusqu’au nom de ma dernière ligne.
Bien sûr, nous ne sommes pas obligés de nommer toutes les lignes. Par exemple, je n’ai donné de nom qu’au deux lignes horizontales les plus à l’intérieur de ma grille dans grid-template-rows.
Ensuite, nous allons pouvoir utiliser ces noms plutôt que les numéros pour positionner nos éléments de grille.
Utiliser les propriétés raccourcies grid-column et grid-row pour positionner les éléments dans la grille en fonction des lignes
La propriété grid-column est la version raccourcie des propriétés grid-column-start et grid-column-end.
La propriété grid-row est la version raccourcie des propriétés grid-row-start et grid-row-end.
Nous allons donc pouvoir passer deux valeurs à chacune de ces propriétés. Les valeurs devront être séparées par un slash /. Les valeurs vont pouvoir être numérotées ou être des noms de lignes. Dans le cas où une seule valeur est passée, elle sera considérée comme étant la valeur de départ.
En reprenant notre grille précédente, on va ainsi pouvoir écrire :
See the Pen Cours HTML CSS 16.3.4 by Pierre (@pierregiraud) on CodePen.
Positionner les éléments en utilisant les zones des grilles
Utiliser la numérotation des lignes pour définir des zones et placer les éléments
La propriété grid-area va nous permettre de définir des zones dans une grille. Pour cela, nous allons déjà pouvoir lui passer 4 numéros en valeur séparés par des slash.
La première valeur correspond au numéro de la ligne horizontale où la zone doit commencer, la deuxième valeur correspond au numéro de la ligne verticale où la zone doit commencer, la troisième valeur correspond au numéro de la ligne horizontale où la zone se termine et la quatrième valeur correspond au numéro de la ligne verticale où la zone se termine.
L’ordre des valeurs (pour un langage qui s’écrit de gauche à droite) est donc un ordre antihoraire : haut, gauche, bas, droite.
La propriété grid-area va s’appliquer aux éléments de grille et ainsi également définir leur taille. Elle peut ainsi remplacer les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.
Illustrons cela en reprenant à nouveau notre grille précédente et en utilisant plutôt grid-area pour placer les éléments dans la grille.
See the Pen Cours HTML CSS 16.3.5 by Pierre (@pierregiraud) on CodePen.
Nommer des zones pour positionner les éléments
Nous allons également pouvoir nommer nos zones de grille pour ensuite placer les éléments. Pour cela, il va falloir procéder en deux étapes.
Nous allons déjà passer les différents noms de zones à grid-area puis ensuite les utiliser avec la propriété grid-template-areas pour définir les zones en soi dans notre grille.
Nous allons passer à grid-template-areas le nom de nos zones en définissant pour chaque cellule la zone à laquelle elle appartient. Nous allons entourer les valeurs pour chaque rangée de la grille avec un couple de guillemets "". Pour laisser une cellule hors zone, nous indiquerons un point . en valeur.
Notez que les zones crées doivent toujours être rectangulaires. D’autres formes comme une forme en « L » ne sont à l’heure actuelle pas permises.
See the Pen Cours HTML CSS 16.3.6 by Pierre (@pierregiraud) on CodePen.
Ici, la zone hg recouvre les deux premières cellules de la première rangée de notre grille tandis que la zone hd recouvre la troisième cellule de cette rangée.
La zone mg recouvre la première cellule de la deuxième rangée de notre grille.
La zone bg recouvre les deux premières cellules de la troisième rangée de la grille.
Finalement, la zone bd recouvre la dernière cellule de la deuxième rangée de la grille ainsi que la dernière cellule de la troisième rangée de la grille.
La deuxième cellule de la deuxième rangée de notre grille n’appartient à aucune zone définie explicitement.
Lignes nommées et zones implicites, zones nommées et lignes implicites
Nous allons pouvoir donner n’importe quel nom à nos lignes et à nos zones. Cependant, certains noms de lignes vont déclencher des mécanismes de création de zones nommées et à l’inverse la création d’une zone nommée va automatiquement définir des noms pour les lignes qui la définissent.
Par exemple, si on utilise un même nom avec les suffixes -start et -end pour nommer les lignes de départ et d’arrivée qui peuvent définir une zone, alors la grille va automatiquement créer la zone en question et va lui donner le même nom sans préfixe. Nous allons ensuite pouvoir utiliser ce nom pour placer nos éléments de grille.
See the Pen Cours HTML CSS 16.3.7 by Pierre (@pierregiraud) on CodePen.
Ici, la grille va automatiquement créer une zone ext et une zone int à partir de la définition de nos lignes. On se sert de la zone int pour positionner notre élément de grille.
A l’inverse, en créant une zone nommée, la grille va automatiquement nommer les lignes qui servent à la définir en leur ajoutant les suffixes -start pour la ligne de départ et -end pour la ligne d’arrivée.
See the Pen Cours HTML CSS 16.3.8 by Pierre (@pierregiraud) on CodePen.
Ici, on définit une zone gauche qui recouvre la première cellule des première et deuxième rangées de la grille. Les lignes gauche-start et gauche-end sont alors automatiquement créées par la grille. On s’en sert pour positionner notre deuxième élément de grille.
Notez qu’il n’est pas gênant qu’une ligne verticale possède le même nom qu’une ligne horizontale ou même que deux lignes verticales ou deux lignes horizontales (ou plus) possèdent le même nom. Cela est parfaitement autorisé et peut faire gagner du temps de développement si on souhaite créer des pistes similaires.
En cas d’ambiguïté sur le nom de la ligne, la grille utilisera toujours la première des lignes qui portent le même nom. Pour lever l’ambiguïté, on peut préciser le numéro de la ligne derrière son nom pour la cibler en particulier.
See the Pen Cours HTML CSS 16.3.9 by Pierre (@pierregiraud) on CodePen.
Ici, on crée une grille possédant à nouveau 3 colonnes et 3 rangées. Toutes les lignes verticales vont porter le nom col (observez bien la syntaxe dans repeat() tandis que toutes les lignes horizontales vont porter le nom ran.
Pour placer un élément dans la grille à partir ou jusqu’à une ligne qui n’est pas la première, il faut préciser le numéro de ligne après son nom pour lever l’ambiguïté.
Les propriétés raccourcies grid-template et grid
Notez qu’il existe deux autres propriétés raccourcies qui peuvent servir à positionner les éléments dans une grille : les propriétés grid-template et grid.
La propriété grid-template est la version raccourcie des propriétés grid-template-rows, grid-template-columns et grid-template-areas.
La propriété grid est une version qui condense encore plus de propriété puisque c’est la version raccourcie de grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns et grid-auto-areas.
Personnellement, je vous déconseille pour des raisons évidentes de lisibilité d d’utiliser ces deux versions raccourcies qui rendre le code très compliqué à comprendre.
Contrôler le positionnement automatique des éléments dans la grille
Mélange de positionnement explicite et implicite
On ne va pas être obligé de positionner explicitement (c’est-à-dire en utilisant une des propriétés vues précédemment) tous les éléments d’une grille.
Dans le cas où certains éléments sont positionnés explicitement et d’autres non, la grille va commencer par placer les éléments positionnés explicitement puis placera ensuite les autres éléments en utilisant le positionnement par défaut.
See the Pen Cours HTML CSS 16.3.10 by Pierre (@pierregiraud) on CodePen.
Ici, on ne positionne explicitement que nos éléments 1, 4 et 5. Ce seront donc les premiers éléments positionnés dans la grille. Ensuite, la grille va positionner automatiquement les éléments 2 et 3 en utilisant le positionnement par défaut dès qu’il y aura un espace suffisant dans la grille.
L’élément n°2 est le premier élément non positionné explicitement et va donc se positionner dans le premier espace disponible. L’élément n°3 est le deuxième élément non positionné et va donc se positionner dans le premier espace disponible suivant l’élément n°2.
Placer les éléments automatiquement en colonne
Le placement automatique des éléments est défini par la propriété grid-auto-flow. La valeur par défaut est row qui signifie que les éléments positionnés automatiquement viendront se placer à côté des autres tant que possible.
Nous allons également pouvoir définir un placement automatique en colonne en utilisant la valeur column de cette même propriété.
See the Pen Cours HTML CSS 16.3.11 by Pierre (@pierregiraud) on CodePen.
Contrôler le chevauchement des éléments dans une grille
Notez également que nous allons pouvoir positionner plusieurs éléments de grille dans les mêmes cellules. Par défaut, le dernier élément déclaré se placera au-dessus des autres.
Nous allons alors pouvoir modifier ce comportement et choisir quel élément devra apparaitre au-dessus de quel autre en définissant un z-index pour les différents éléments se chevauchant.
See the Pen Cours HTML CSS 16.3.12 by Pierre (@pierregiraud) on CodePen.
Ici, nous créons deux grilles identiques. Les éléments 1, 2, 3 et 4 des deux grilles vont se chevaucher. La première grille suit le comportement par défaut des éléments : le deuxième élément déclaré dans le code viendra se positionner au-dessus du premier, le troisième au-dessus du deuxième et etc.
Nous ajoutons ensuite des z-index aux éléments de notre deuxième grille afin de modifier l’ordre d’empilement des éléments.
