Grille

Ce qui est fixe, ce qui s'adapte

Les trois grilles suivent la même mécanique : les marges et les gouttières ne bougent jamais, seules les colonnes s'étirent. Une colonne n'a donc pas de largeur en pixels, elle vaut une fraction : 25 % en mobile, 8,3333 % en desktop.

C'est ce qui rend le module lisible à toutes les tailles d'écran sans avoir à redéfinir quoi que ce soit. La gouttière de 24 px se lit comme un retrait interne de 12 px de chaque côté d'une colonne.

Le corollaire à retenir : la gouttière n'est pas seulement un vide entre colonnes, c'est l'unité d'espacement de référence entre deux blocs de fonctionnalités. Quand on cherche combien mettre entre deux cartes voisines, la réponse est 24 px.

Les trois grilles

En mobile, les 24 px de marge ne sont pas qu'une respiration : ils protègent le contenu des bords et préservent la zone de pouce.

Dans l'espace client, le menu latéral vaut 20 % avec un minimum de 296 px et aucun maximum. Il reste fixe et invariable, et se tient hors grille : les 12 colonnes n'existent que dans la zone de contenu.

Les recettes

CSS Grid est l'option recommandée. Elle dit la grille dans les mêmes termes que la maquette, une déclaration par notion.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 1fr = 25 % adaptatif */
  column-gap: 24px;                     /* gouttière */
  padding-inline: 24px;                 /* marges latérales */
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 1fr = 8.3333 % adaptatif */
  column-gap: 24px;
  padding-inline: 48px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  padding-inline: 56px;
}

Une seconde écriture existe, en flex avec des colonnes à pourcentage fixe et 12 px de retrait interne de chaque côté. Elle sert de repli sur un modèle en boîte, au prix d'une marge de conteneur compensée : 12 px en mobile, 36 px en parcours, 44 px en espace client, soit la marge visée moins les 12 px que porte déjà la colonne.

À faire, à ne pas faire

Partir systématiquement du gabarit configuré. Caler les blocs sur les colonnes et les gouttières, plutôt que de saisir des marges à la main. Séparer deux blocs de fonctionnalités par la gouttière de 24 px.

Ne pas poser de contenu dans les gouttières ni dans les marges : ce sont des zones de respiration, pas de la place disponible. Ne pas travailler hors gabarit ou à une largeur d'écran non standard. Ne pas désactiver, déplacer ou reconfigurer la grille fournie, et ne pas retoucher le nombre de colonnes, la gouttière ou la marge au cas par cas : une grille ajustée localement cesse d'être une grille.

Dans l'espace client, ne pas toucher non plus à la structure ni aux contraintes du menu latéral.