On remarque rarement, élément par élément, pourquoi une mise en page paraît « soignée » ; il y a un squelette invisible derrière, et ce qu'on appelle le système de grille en design est précisément ce squelette. Une grille divise la page en colonnes et lignes régulièrement espacées afin d'aligner le texte, les images et les boutons. Une grille bien construite supprime la charge de décider à chaque fois où placer chaque élément ; elle instaure un rythme et une logique que l'œil peut suivre. Dans cet article, je parcours les briques de la grille, la logique des colonnes et de la baseline, une implémentation CSS réelle, et les erreurs fréquentes.
Pourquoi les grilles fonctionnent
L'apport réel de la grille n'est pas l'esthétique mais la cohérence. Des titres, paragraphes et images qui s'alignent sur les mêmes lignes invisibles produisent un alignement que l'œil perçoit, et cet alignement rend le contenu « professionnel » et « fiable » au niveau inconscient. En pratique, une grille résout trois problèmes à la fois :
- Elle réduit la charge de décision : la largeur et la position de chaque élément sont définies par rapport aux colonnes, vous ne demandez plus sans cesse « combien de pixels ? »
- Elle apporte la cohérence : des dizaines d'écrans d'un même projet reposent sur le même système, produisant un aspect homogène.
- Elle facilite le travail d'équipe : quand designer et développeur parlent le même langage de colonnes, la maquette Figma se transpose en code presque à l'identique.
Les briques d'une grille
Quelques termes reviennent constamment dès qu'on parle d'une grille en colonnes. Les clarifier facilite grandement la suite :
- Colonne : la zone verticale où se pose le contenu. Sur le web, 12 colonnes est un choix courant ; 12 se divise par 2, 3, 4 et 6, ce qui rend possibles des mises en page flexibles.
- Gouttière : l'espace entre deux colonnes. Elle empêche les éléments de se coller et crée de la respiration.
- Marge : la distance de la grille au bord de l'écran. Réduite sur mobile, plus large sur grand écran.
- Module et ligne : les cellules formées là où les colonnes croisent des lignes horizontales ; cartes et blocs d'images se posent sur ces modules.
Quand ces quatre notions se rejoignent, les questions « quelle largeur, où ça commence, combien de colonnes » trouvent toutes une réponse chiffrée.
La baseline grid : le rythme vertical
La grille en colonnes résout l'alignement horizontal ; la baseline grid résout l'alignement vertical. Une baseline grid divise la page en lignes horizontales de hauteur égale et vise à faire reposer chaque ligne de texte sur ces lignes. La logique est la suivante : on choisit une unité de base (par exemple 8px) et on exprime toute mesure verticale — line-height, espacement des titres, interlignes des paragraphes — en multiples de cette unité. Résultat : les lignes de texte de deux colonnes distinctes s'alignent à la même hauteur et la page paraît « posée ».
Poursuivre une baseline grid pixel par pixel est difficile sur le web, car les métriques de police varient selon le navigateur. L'approche pratique est donc de construire une échelle d'espacement vertical cohérente plutôt qu'une baseline parfaite : garder chaque espace en multiple de 4 ou 8 donne un rythme assez régulier pour que l'œil ne saisisse pas la différence.
Implémentation avec CSS Grid
Dans les navigateurs modernes, nul besoin d'une bibliothèque séparée pour bâtir une grille à 12 colonnes ; CSS Grid le fait directement. L'exemple ci-dessous définit 12 colonnes, une gouttière fixe et une marge responsive :
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* gouttière */
max-width: 1200px;
margin-inline: auto; /* centrer la page */
padding-inline: 24px; /* marge */
}
/* Une carte sur 4 colonnes */
.card {
grid-column: span 4;
}
/* Un bloc large, 8 colonnes, partant de la droite */
.feature {
grid-column: 5 / 13;
}Sur mobile, une seule media query suffit pour réduire 12 colonnes à une. L'essentiel est de réduire le nombre de colonnes selon le contenu, pas de comprimer les cartes :
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; gap: 16px; }
.card, .feature { grid-column: 1 / -1; }
}Pour préserver le rythme vertical, définir une variable d'échelle d'espacement simplifie le travail. Dès que vous reliez chaque espace vertical à ces paliers, vous avez porté la logique de la baseline dans le code :
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
}
h2 { margin-block: var(--space-4) var(--space-2); }
p { margin-block: 0 var(--space-3); }Casser la grille à dessein
La grille est une référence, pas une prison. Les designs les plus marquants sont souvent ceux qui établissent la grille puis la cassent volontairement : agrandir une image pour qu'elle déborde d'une colonne, ou décaler un titre dans la marge, capte le regard. La règle est simple : pour casser, il faut d'abord construire. Sans système, « casser » se confond avec le hasard. Quand la grille est solide, une seule exception devient un accent fort ; sans grille, tout ressemble à une exception.
Erreurs fréquentes
- Trop de colonnes : 24 colonnes semblent flexibles, mais pour la plupart des projets 12 suffisent largement et sont plus faciles à gérer.
- Oublier les gouttières : sans gouttière, les colonnes se collent ; même avec un alignement correct, le design paraît étriqué.
- Espacements arbitraires : des valeurs aléatoires comme 13px, 19px, 27px cassent le rythme. Fixez chaque espace en multiples de 4 ou 8.
- Reporter la grille telle quelle sur mobile : entasser les 12 colonnes du bureau sur un écran étroit nuit à la lisibilité ; réduisez le nombre de colonnes.
Questions fréquentes
Combien de colonnes ma grille doit-elle avoir ?
Pour les interfaces web, 12 colonnes est le choix le plus courant et le plus flexible, car il se divise proprement en 2, 3, 4 et 6 parties. Pour des pages de contenu simples, 6 ou 8 colonnes suffisent aussi ; l'important est de choisir un système et d'y rester fidèle.
Une baseline grid est-elle vraiment nécessaire sur le web ?
Une baseline grid au pixel près est généralement un effort inutile sur le web. À la place, construire une échelle d'espacement qui garde chaque espace vertical en multiple de 4 ou 8 donne le même ordre avec beaucoup moins d'efforts.
CSS Grid ou Flexbox ?
Pour des mises en page bidimensionnelles (où lignes et colonnes sont gérées ensemble), CSS Grid est idéal. Pour des éléments alignés sur un seul axe (une barre de navigation, un groupe de boutons), Flexbox est plus pratique. Les utiliser ensemble est l'approche la plus répandue.
Bien poser la mise en page dès le départ est bien plus rapide que des dizaines de petits ajustements d'alignement par la suite. Pour un système de grille évolutif et un design d'interface adapté à votre marque, contactez-moi.