Positionner les éléments dans CSS Grid : l'architecture des chambres de la pyramide

Content de te revoir ! Maintenant que tu connais les bases de CSS Grid, il est temps d'apprendre à positionner précisément les éléments à l'intérieur de la grille. Par défaut, la grille place les éléments les uns après les autres, cellule après cellule, comme des ouvriers qui posent les blocs de gauche à droite. Mais la salle du trône ne peut pas se retrouver là où le hasard de la file la place. Imagine que tu es l'architecte d'une pyramide et que tu dois planifier avec soin l'emplacement de chaque chambre, de chaque couloir et de la salle du trône. Dans CSS Grid, tu disposes d'outils de positionnement puissants !

Rappelons le plan de construction. Toute mise en page Grid se construit dans le même ordre : d'abord le conteneur avec display: grid, puis les colonnes (grid-template-columns), les rangées (grid-template-rows) et les espacements (gap), et enfin le positionnement des éléments, auquel cette leçon est consacrée. Tu peux décrire les colonnes à la main avec des pixels fixes, des proportions fr, le motif repeat(3, 1fr) ou de façon entièrement automatique avec repeat(auto-fill, minmax(250px, 1fr)).

Les lignes de la grille (grid lines)

Chaque grille possède des lignes numérotées, à la fois verticales (lignes de colonnes) et horizontales (lignes de rangées). La numérotation commence à 1. Si tu as 3 colonnes, tu as 4 lignes de colonnes (1, 2, 3, 4). Voyons cela sur une grille de trois sur trois :

1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: 100px 100px 100px;
5  gap: 10px;
6}

Dans l'exemple ci-dessus, nous avons les lignes de colonnes 1-4 et les lignes de rangées 1-4. Tu peux aussi compter les lignes à partir de la fin : -1 désigne la dernière ligne, ce qui te servira dans la prochaine leçon.

grid-column et grid-row

Pour placer un élément à une position précise dans la grille, on utilise les propriétés grid-column et grid-row. On indique la ligne de début et la ligne de fin, séparées par une barre oblique :

1.throne-room {
2  grid-column: 1 / 3;  /* De la ligne 1 à la ligne 3 = s'étend sur 2 colonnes */
3  grid-row: 1 / 2;     /* De la ligne 1 à la ligne 2 = s'étend sur 1 rangée */
4}
5
6.corridor {
7  grid-column: 3 / 4;  /* Uniquement la troisième colonne */
8  grid-row: 1 / 4;     /* S'étend sur 3 rangées */
9}

La salle du trône occupe les deux premières colonnes de l'étage supérieur, et un couloir étroit traverse les trois étages dans la dernière colonne. Attention à l'erreur la plus fréquente : l'écriture 1 / 3 ne signifie pas trois colonnes. L'élément se termine sur la ligne 3, il n'occupe donc que la première et la deuxième colonne.

Le mot-clé span

Au lieu d'indiquer des numéros de lignes, tu peux utiliser le mot span pour définir le nombre de cellules qu'un élément doit occuper. C'est pratique quand tu connais la taille de la chambre mais que tu ne veux pas compter les lignes :

1.grand-hall {
2  grid-column: span 2;  /* S'étend sur 2 colonnes */
3  grid-row: span 3;     /* S'étend sur 3 rangées */
4}
5
6.small-chamber {
7  grid-column: 2 / span 1;  /* Commence à la ligne 2, occupe 1 colonne */
8}

La grande salle commencera là où le placement automatique la mettra, et s'étendra sur 2 colonnes et 3 rangées. La petite chambre commence sur la ligne 2 et occupe une colonne. Tu peux donc combiner les deux écritures : tu indiques la ligne de départ par un nombre, et la longueur avec le mot span.

grid-area - la notation raccourcie

La propriété grid-area te permet de définir la position d'un élément en une seule ligne. Format : grid-area: row-start / column-start / row-end / column-end. L'ordre est l'inverse de celui de margin : là-bas, on tourne dans le sens des aiguilles d'une montre, ici on indique le haut, le côté gauche, le bas et le côté droit :

1.pharaoh-chamber {
2  grid-area: 1 / 1 / 3 / 3;
3  /* Rangées 1-3, colonnes 1-3 = un carré 2x2 */
4}
5
6.guard-post {
7  grid-area: 3 / 1 / 4 / 4;
8  /* Dernière rangée, toute la largeur */
9}

La chambre du pharaon occupe un carré 2x2 dans le coin supérieur gauche, et le poste de garde toute la dernière rangée d'une grille à trois colonnes. Dans grid-area, tu peux aussi écrire le nom d'une zone définie avec grid-template-areas, que tu as découvert dans la première leçon sur Grid.

Exemple pratique : le plan d'un temple

Réunissons tout cela dans le plan d'un temple. On commence par la structure HTML avec cinq pièces, écrites tout simplement les unes sous les autres :

1<div class="temple">
2  <div class="entrance">Entrée</div>
3  <div class="main-hall">Grande salle</div>
4  <div class="side-chapel">Chapelle latérale</div>
5  <div class="inner-sanctuary">Sanctuaire</div>
6  <div class="treasury">Trésor</div>
7</div>

L'ordre des éléments dans le HTML n'a pas besoin de correspondre à leur place sur le plan, car c'est le CSS qui en décide. La grille a quatre colonnes et trois rangées de 120px, et chaque chambre reçoit ses propres coordonnées :

1.temple {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 120px);
5  gap: 8px;
6}
7
8.entrance {
9  grid-column: 2 / 4;  /* Colonnes du milieu */
10  grid-row: 1;
11}
12
13.main-hall {
14  grid-column: 1 / 5;  /* Toute la largeur */
15  grid-row: 2;
16}
17
18.side-chapel {
19  grid-column: 1 / 2;
20  grid-row: 3;
21}
22
23.inner-sanctuary {
24  grid-column: 2 / 4;
25  grid-row: 3;
26}
27
28.treasury {
29  grid-column: 4 / 5;
30  grid-row: 3;
31}

L'entrée se trouve dans les deux colonnes du milieu de la première rangée, la grande salle occupe toute la largeur, car les quatre colonnes se terminent sur la ligne 5, et dans la dernière rangée se tiennent côte à côte la chapelle, le sanctuaire et le trésor. L'écriture grid-row: 1 est un raccourci : l'élément commence sur la ligne 1 et occupe une rangée. N'oublie pas que les lecteurs d'écran et la navigation au clavier suivent l'ordre du HTML, et non celui de l'écran, alors ne réorganise pas les éléments au point que cette logique ne tienne plus.

Mon conseil : pour les éléments isolés, utilise span, et décris le plan de toute la page avec des numéros de lignes ou des zones nommées. Dans le bac à sable ci-dessous, tu trouveras le même plan de temple. Déplace le trésor dans la première colonne et observe comment la disposition change. Dans la prochaine leçon, tu découvriras les numéros de lignes négatifs et les lignes de grille nommées.

Avec ces techniques, tu peux disposer précisément les éléments à l'intérieur de la grille, exactement comme un architecte qui planifie chaque chambre d'un temple égyptien. Souviens-toi : les numéros de lignes sont les coordonnées sur le plan de la pyramide, car tu indiques où la chambre commence et sur quelle ligne elle se termine.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Positionnement dans CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Plan du temple égyptien</h1>
11    <div class="temple">
12        <div class="entrance">Entrée</div>
13        <div class="main-hall">Grande salle</div>
14        <div class="side-chapel">Chapelle latérale</div>
15        <div class="inner-sanctuary">Sanctuaire</div>
16        <div class="treasury">Trésor</div>
17    </div>
18    <!-- Tâche : utilise grid-column et grid-row pour disposer les éléments -->
19    <!-- Entrée : colonnes 2-4, ligne 1 -->
20    <!-- Grande salle : toute la largeur (1-5), ligne 2 -->
21    <!-- Chapelle latérale : colonne 1, ligne 3 -->
22    <!-- Sanctuaire : colonnes 2-4, ligne 3 -->
23    <!-- Trésor : colonne 4, ligne 3 -->
24</body>
25</html>