Module 7 — la grille: dompter l'espace en deux dimensions | Faites entrer CSS

Archives CSS — L'affaire des deux dimensions

Date de consignation : Nuit du 17 mars — Brouillard sur le viewport

Flexbox avait nettoyé les rues. Il avait mis de l'ordre dans les alignements, les espacements, les petits arrangements entre divs. Mais pour les gros dossiers — les layouts complets, les tableaux de bord, les magazines en ligne — il manquait de vision. Il pensait en ligne, ou en colonne. Jamais les deux à la fois.

C'est là que CSS Grid est arrivé.

Pas un remplaçant. Un complice. Un planificateur. L'architecte qui dessine les plans avant que la première brique ne soit posée. Avec Grid, on ne pense plus en éléments, mais en territoire. En cases. En coordonnées.

7.1 — DÉCLARER LE TERRAIN

Délimiter les lignes et les colonnes

Pour activer Grid, même rituel que Flexbox, mais avec une ambition différente :

.container {
  display: grid;  /* La grille est ouverte. Tout peut être placé. */
}

Ensuite, on définit le cadastre :

.container {
  grid-template-columns: 200px 1fr 150px; /* Trois colonnes */
  grid-template-rows: 80px auto 120px;    /* Trois lignes */
  gap: 20px;  /* Les gouttières. L'espace qui sépare les cellules. */
}

grid-template-columns : largeurs des colonnes. En pixels, pourcentages, fr (fraction), auto.
grid-template-rows : hauteurs des lignes.
gap : anciennement grid-gap. Espacement uniforme entre les cellules. (row-gap et column-gap existent aussi).

7.2 — POSITIONNER LES PIÈCES

Coordonnées précises

Avec Grid, chaque enfant peut être placé exactement où on le veut, en superposant si besoin.

▶ `grid-column` et `grid-row`

On parle en lignes, pas en cellules. Une grille de 3 colonnes a 4 lignes verticales.

.item {
  grid-column: 1 / 3;  /* De la ligne 1 à la ligne 3 → occupe 2 colonnes */
  grid-row: 2 / 4;     /* De la ligne 2 à la ligne 4 → occupe 2 lignes */
}

Raccourci avec span :

.item {
  grid-column: 2 / span 2;  /* Commence à la ligne 2, s'étend sur 2 colonnes */
}

▶ `grid-area` — la touche maître

Nommer une zone, ou utiliser en raccourci pour row-start / column-start / row-end / column-end.

.item {
  grid-area: 1 / 2 / 3 / 4; /* row-start, col-start, row-end, col-end */
}

Ou mieux, avec des noms (voir plus bas).

7.3 — LES FONCTIONS QUI CHANGENT TOUT

Répétition, flexibilité, adaptation

🔁 `repeat()` — pour éviter la lassitude

.container {
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
  grid-template-rows: repeat(3, 100px);  /* 3 lignes de 100px */
}

📏 `minmax()` — la promesse

Définit une fourchette : un minimum, un maximum.

.container {
  grid-template-columns: minmax(200px, 1fr) 2fr;
  /* La première colonne : au moins 200px, au plus 1 fraction */
}

🤖 `auto-fit` vs `auto-fill` — la différence subtile

Avec repeat() et minmax(), ils créent des colonnes responsives.

.container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

auto-fit : étire les colonnes existantes pour remplir l'espace.
auto-fill : crée autant de colonnes vides que possible, même si pas remplies.

La différence ne se voit que quand il y a moins d'éléments que de colonnes possibles.

7.4 — ZONES NOMÉES ET TEMPLATES

La cartographie avancée

On peut donner des noms aux zones et construire un layout comme un plan.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Changer le layout en responsive devient un jeu d'enfant :

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

7.5 — ALIGNEMENT DANS LA GRILLE

Justify, align, place

Comme Flexbox, mais avec deux niveaux :

Alignement des items dans leur cellule (justify-items, align-items)
Alignement du contenu de la grille entière (justify-content, align-content)

.container {
  justify-items: center;    /* Alignement horizontal des items dans leur cellule */
  align-items: start;       /* Alignement vertical des items dans leur cellule */
  justify-content: space-between; /* Répartition des colonnes dans l'espace */
  align-content: center;    /* Alignement vertical des lignes */
}

Et pour un item spécifique : justify-self, align-self.

7.6 — CAS PRATIQUES : SUR LE TERRAIN

🟦 SCÈNE 1 : LAYOUT MAGAZINE

Zones nommées, propre et lisible

<div class="magazine">
  <header class="masthead">Titre</header>
  <aside class="sidebar">Nav</aside>
  <main class="content">Article</main>
  <div class="ad">Pub</div>
  <footer class="footer">©</footer>
</div>

.magazine {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "masthead masthead"
    "sidebar content"
    "ad footer";
  gap: 1rem;
  min-height: 100vh;
}

🟩 SCÈNE 2 : GALERIE PHOTO RESPONSIVE

Avec auto-fit et minmax

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

/* Chaque image occupe une cellule, s'adapte automatiquement */

🟥 SCÈNE 3 : TABLEAU DE BORD COMPLEXE

Avec chevauchement et placement précis

.dashboard {
  display: grid;
  grid-template-columns: 300px repeat(3, 1fr);
  grid-template-rows: 100px repeat(2, 200px) 150px;
}

.chart {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  z-index: 1; /* Pour superposer si besoin */
}

.alert {
  grid-column: 1 / -1; /* -1 = dernière ligne */
  grid-row: 1;
}

7.7 — FLEXBOX VS GRID : LE DUO

Quand utiliser l'un, quand utiliser l'autre

Critère	CSS Grid	Flexbox
Dimension	2D (lignes ET colonnes)	1D (ligne OU colonne)
Approche	Layout d'abord, contenu après	Contenu d'abord, layout après
Superposition	Native et facile	Difficile, avec `z-index`
Responsive	`auto-fit`, `minmax()`, zones	`flex-wrap`, `flex-basis`
Cas typique	Pages entières, magazines	Navbars, menus, listes
Alignement	Sur deux axes simultanément	Sur un axe à la fois

La règle du flic expérimenté :

Besoin d'un layout global, fixe ou flexible en 2D ? → Grid.
Besoin d'aligner des éléments dans un conteneur, dans une direction ? → Flexbox.

Et souvent, les deux travaillent ensemble : Grid pour la structure de la page, Flexbox pour aligner le contenu à l'intérieur des cellules.

7.8 — NOTES DE FIN D'ENQUÊTE

fr unité : fraction de l'espace disponible. Unique à Grid.
Lignes implicites : si on place un item hors des lignes définies, Grid crée des lignes automatiquement (contrôlable avec grid-auto-rows/grid-auto-columns).
Support navigateur : excellent depuis 2017. IE11 nécessite un préfixe ancien.
Debug : utilisez l'outil Grid Inspector des DevTools (les lignes apparaissent).
Performance : Grid est très optimisé, même pour des layouts complexes.

Dernière lumière sur l'écran : 05:43.
La grille est tracée. Les coordonnées sont claires. Le brouillard se lève.
Grid a structuré l'espace. Flexbox alignera les détails.
Ils forment une bonne équipe. L'architecte et le finisseur.
Demain, peut-être, on parlera animations. Des choses qui bougent.
Mais pour ce soir, le layout est sous contrôle. En deux dimensions.

Fin du dossier CSS Grid — Classé et archivé.

Module 7 — la grille: dompter l'espace en deux dimensions