Positionnement avancé dans CSS Grid

Imagine que tu es l'architecte d'une pyramide et que tu dois déterminer précisément l'emplacement de chaque chambre, de chaque couloir et du trésor. Le plan de la leçon précédente a pourtant un point faible : quand le pharaon fait ajouter une colonne, il faut corriger chaque 1 / 4 à la main. Dans CSS Grid, tu disposes de techniques de positionnement avancées qui te permettent de contrôler chaque élément de la grille avec une précision chirurgicale et d'écrire des plans qui résistent aux transformations.

grid-column et grid-row avec des numéros de lignes

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). Tu peux indiquer la position exacte d'un élément en précisant ses lignes de début et de fin :

1.pharaoh-chamber {
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}

La chambre du pharaon occupe deux colonnes et une rangée, car elle se termine sur la ligne 3 et sur la ligne 2. Tu peux aussi utiliser des numéros de lignes négatifs, comptés à partir de la fin de la grille. La ligne -1 est toujours la dernière ligne de la grille explicite, c'est-à-dire celle définie dans grid-template-columns :

1.footer {
2  grid-column: 1 / -1;  /* De la première à la dernière ligne = toute la largeur */
3}

Le pied de page va de la première à la dernière ligne, et si tu ajoutes une colonne, il occupera toujours toute la largeur sans aucune correction. Les numéros négatifs ne comptent toutefois pas les pistes que le navigateur a ajoutées de lui-même en dehors de la grille explicite. C'est comme tracer des coordonnées précises sur le plan d'une pyramide, où chaque bloc de pierre a une position exactement assignée.

Étirer les éléments - le mot-clé span

Au lieu d'indiquer le numéro de la ligne de fin, tu peux utiliser le mot span pour préciser le nombre de cellules qu'un élément doit occuper :

1.grand-hall {
2  grid-column: span 2;  /* S'étend sur 2 colonnes à partir de la position actuelle */
3  grid-row: span 3;     /* S'étend sur 3 rangées */
4}
5
6.treasure-room {
7  grid-column: 2 / span 2;  /* Commence à la ligne 2, occupe 2 colonnes */
8  grid-row: 1 / span 1;
9}

La différence entre span et les numéros de lignes, c'est que span est relatif et dit « occupe N cellules », tandis que les numéros de lignes sont absolus et disent « de la ligne X à la ligne Y ». La grande salle, sans ligne de départ, ira là où le placement automatique la mettra, alors que la salle du trésor commence exactement sur la ligne 2.

Les lignes de grille nommées

Les nombres sont difficiles à retenir, c'est pourquoi tu peux donner des noms aux lignes, ce qui rend le code plus lisible. Les noms se placent entre crochets, entre les tailles des colonnes, et une même ligne peut porter plusieurs noms à la fois :

1.temple {
2  display: grid;
3  grid-template-columns:
4    [sidebar-start] 200px
5    [sidebar-end main-start] 1fr
6    [main-end aside-start] 250px
7    [aside-end];
8  grid-template-rows:
9    [header-start] 80px
10    [header-end content-start] 1fr
11    [content-end footer-start] 60px
12    [footer-end];
13}

La ligne entre le panneau latéral et le contenu porte deux noms : sidebar-end et main-start. Les tailles des colonnes et des rangées sont les mêmes que sans noms, car les noms ne font que décrire les lignes. Sans noms, tu écrirais ces mêmes rangées en version courte, grid-template-rows: 80px 1fr 60px : un en-tête fixe, un contenu flexible et un pied de page fixe. Tu peux maintenant positionner les éléments en utilisant des noms au lieu de numéros :

1.sidebar {
2  grid-column: sidebar-start / sidebar-end;
3  grid-row: content-start / content-end;
4}
5
6.main-content {
7  grid-column: main-start / main-end;
8  grid-row: content-start / content-end;
9}
10
11.header {
12  grid-column: sidebar-start / aside-end;  /* Toute la largeur */
13  grid-row: header-start / header-end;
14}

L'en-tête va de sidebar-start à aside-end, c'est-à-dire sur toute la largeur. Les lignes nommées sont comme des étiquettes sur un plan d'architecture : au lieu de « ligne 3 », tu as « début de la grande salle ». C'est bien plus facile de s'y retrouver !

grid-area comme raccourci de positionnement

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. Les valeurs peuvent être des nombres, des nombres négatifs ou des noms de lignes :

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

Le trône occupe un carré 2x2 dans le coin supérieur gauche, et le poste de garde, grâce à -1, s'étend sur toute la troisième rangée, quel que soit le nombre de colonnes.

Exemple pratique : le plan d'un temple égyptien

Combinons toutes les techniques pour créer le plan complexe d'un temple. Les colonnes portent les noms de l'entrée, de la salle et de la chapelle, et les rangées les noms top, middle, bottom et end :

1.temple-complex {
2  display: grid;
3  grid-template-columns:
4    [entrance-start] 150px
5    [entrance-end hall-start] 1fr
6    [hall-end chapel-start] 200px
7    [chapel-end];
8  grid-template-rows:
9    [top] 100px
10    [middle] 1fr
11    [bottom] 80px
12    [end];
13  gap: 10px;
14  min-height: 400px;
15}
16
17.entrance {
18  grid-column: entrance-start / chapel-end;  /* Toute la largeur */
19  grid-row: top / middle;
20}
21
22.main-hall {
23  grid-area: middle / hall-start / bottom / hall-end;
24}
25
26.side-chapel {
27  grid-column: chapel-start / chapel-end;
28  grid-row: middle / end;  /* Deux rangées */
29}
30
31.storage {
32  grid-column: entrance-start / entrance-end;
33  grid-row: middle / bottom;
34}
35
36.foundation {
37  grid-column: 1 / -1;  /* Toute la largeur avec des numéros */
38  grid-row: bottom / end;
39}

L'entrée occupe toute la rangée du haut, la grande salle utilise grid-area écrit uniquement avec des noms, et les fondations mélangent noms et nombres. Remarque que la chapelle latérale et les fondations se partagent la dernière rangée dans la colonne de la chapelle. Les éléments positionnés explicitement peuvent se chevaucher, et ce n'est pas une erreur de syntaxe. C'est celui qui vient plus loin dans le HTML qui est dessiné au-dessus, sauf si tu modifies son z-index. Dans un vrai projet, raccourcis donc la chapelle à une seule rangée ou exploite volontairement le chevauchement.

Des pièces mises en valeur dans la galerie

Le positionnement avancé se combine très bien avec une grille automatique. La galerie calcule elle-même ses colonnes grâce à repeat(auto-fill, minmax(250px, 1fr)), et la statue mise en valeur occupe un carré de deux sur deux :

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
4  gap: 16px;
5}
6
7.gallery .featured {
8  grid-column: span 2;
9  grid-row: span 2;
10}

Chaque colonne mesure de 250px à 1fr, et les autres pièces se disposent autour de la statue. Quand l'écran ne peut contenir qu'une seule colonne, span 2 oblige le navigateur à ajouter une colonne implicite supplémentaire en dehors de la grille prévue, c'est pourquoi, sur les écrans étroits, il est plus sûr d'annuler le span dans une media query. Les grands éléments laissent aussi parfois des cellules vides, et grid-auto-flow: dense permet au navigateur de les remplir avec des éléments plus petits, au prix d'un changement de l'ordre visuel.

Avec ces techniques de positionnement avancées, tu peux disposer précisément les éléments à l'intérieur de la grille. Les numéros de lignes te donnent un contrôle total, span simplifie l'étirement, les lignes nommées rendent le code lisible, et grid-area permet une notation concise. Mon conseil : pour les mises en page, utilise des lignes nommées ou 1 / -1, et réserve span aux cartes et aux pièces exposées. Tu réuniras tout cela dans le projet Abou Simbel à la fin du module. Dans le bac à sable ci-dessous t'attend le portail d'un temple : définis pour lui grid-template-areas, attribue les éléments aux zones, puis essaie la même chose avec des lignes nommées.

Souviens-toi : une ligne nommée est une inscription gravée sur le plan du temple, qui ne se perdra pas, même quand le pharaon fera ajouter une nouvelle chambre.

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>Grid Template Areas</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="portal">
11        <header class="portal-header">Temple du savoir</header>
12        <nav class="portal-nav">
13            <a href="#">Accueil</a>
14            <a href="#">Pyramides</a>
15            <a href="#">Pharaons</a>
16            <a href="#">Hiéroglyphes</a>
17        </nav>
18        <section class="portal-hero">Section Hero - Découvre les secrets</section>
19        <main class="portal-content">
20            <h2>Contenu principal</h2>
21            <p>Ici, tu trouveras le savoir sur l'Égypte antique.</p>
22        </main>
23        <aside class="portal-sidebar">
24            <h3>Panneau latéral</h3>
25            <p>Anecdotes et informations supplémentaires.</p>
26        </aside>
27        <footer class="portal-footer">Pied de page du temple</footer>
28    </div>
29    <!-- Tâche : définis grid-template-areas et assigne les éléments -->
30</body>
31</html>