Systèmes de grille : le guide du designer

Les systèmes de grille sont la partie du design qui travaille le plus et reçoit le moins de crédit. Chaque produit que vous respectez en a une, chaque produit devant lequel vous scrollez sans vous arrêter n'en a pas. La grille n'est pas de la décoration. C'est le contrat qui tient ensemble la typographie, la hiérarchie et le rythme, pour que l'utilisateur lise la page d'un seul coup d'œil au lieu de la déchiffrer.

L'école suisse l'a prouvé sur papier il y a soixante ans. Müller-Brockmann, Hofmann, Ruder, toute une génération de designers qui traitaient la grille comme un outil de pensée, pas comme un raccourci de mise en page. La leçon a mieux vieilli que presque toute autre théorie du design. Chaque grille de produit moderne, de Linear à Stripe en passant par le New York Times, descend de la même idée. Voici la référence de travail pour la grille en 2026.

Müller-Brockmann a donné à la grille moderne sa grammaire

Le livre de Josef Müller-Brockmann de 1981, « Grid Systems in Graphic Design », reste la colonne vertébrale de la discipline. Avant ce livre, les grilles existaient mais le vocabulaire non. Après, les designers ont eu un langage commun pour les colonnes, les gouttières, les marges et les modules, qui a voyagé entre studios, écoles et décennies.

L'école suisse traitait la grille comme un moteur de contraintes. Choisir un système, le tenir, et laisser la variation venir du contenu, pas de l'improvisation. Les affiches de Müller-Brockmann pour la Tonhalle de Zurich ressemblent à des captures d'écran d'UI produit en 2026 parce qu'elles font tourner la même logique.

Une typo forte sur une grille fixe. L'espace blanc comme élément structurel, pas comme reste d'espace. La même logique réapparaît aujourd'hui dans des textes comme pourquoi tous les SaaS se ressemblent en 2026, où l'homogénéité, c'est la grille qui gagne, puis qui perd ses crocs.

Le web a hérité de cette grammaire lentement. CSS nous a donné les floats, puis Flexbox, puis enfin CSS Grid. Chaque étape a réduit l'écart entre ce que les designers print savaient faire en 1961 et ce que les développeurs front-end savaient faire dans un navigateur.

Le vocabulaire n'a pas changé. Les colonnes sont toujours des colonnes. Les outils ont juste rattrapé leur retard.

Pourquoi les grilles fonctionnent, en un paragraphe

Une grille fonctionne parce qu'elle retire mille petites décisions au designer et les rend à l'utilisateur sous forme de prévisibilité. L'œil apprend le rythme dès la première seconde d'une page et s'en sert pour naviguer dans tout ce qui suit.

Sans grille, chaque décision de mise en page est inédite. Où se place le titre, où s'arrête l'image, quelle largeur pour le corps de texte, comment la barre latérale se rapporte-t-elle à la colonne principale. Avec une grille, ces réponses sont décidées d'avance.

Le designer consacre son attention à la hiérarchie et au contenu au lieu de remesurer chaque bloc. L'utilisateur consacre la sienne au message au lieu de décoder la structure. C'est tout le marché.

Les cinq types de grilles, au même endroit

La plupart des équipes traitent « la grille » comme une seule décision. Il y en a cinq. Chacune résout un problème de mise en page différent et échoue pour une raison différente. Choisissez mal et la page se battra contre vous pour toujours.

Ce tableau est le marque-page. La plupart des désaccords sur la mise en page s'arrêtent à l'instant où l'équipe s'accorde sur laquelle de ces cinq grilles elle utilise.

La grille en colonnes est le cheval de trait

Les grilles en colonnes sont le choix par défaut pour presque tout ce que vous livrez sur le web. Des colonnes verticales, des gouttières fixes, des marges optionnelles. Le contenu coule dans les colonnes, les blocs de mise en page couvrent une ou plusieurs d'entre elles, et le rythme est fixé par le nombre de colonnes en lesquelles le canevas est divisé.

Stripe fait tourner une grille à 12 colonnes sur toute sa surface marketing. Le shell d'app de Linear repose sur une grille en colonnes qui se cale sur un rail unique sur mobile et s'étend en barre latérale plus colonne principale sur desktop. Les pages marketing de Vercel utilisent une grille à 12 colonnes avec un espace négatif délibéré, et les colonnes sont visibles si vous plissez les yeux devant la matrice de prix du dashboard ou la mise en page du journal de déploiement. La même grille qui faisait tourner les affiches en 1961 fait tourner les sites marketing en 2026, juste avec des media queries en dessous.

N'écartez la grille en colonnes que lorsque la mise en page est fondamentalement non rectangulaire, ce qui sur le web n'arrive presque jamais. L'analyse de la stack de site marketing 2026 couvre les choix de frameworks qui reposent sur cette grille.

La grille modulaire sert la densité éditoriale

Une grille modulaire divise le canevas en cellules dans les deux directions, colonnes et lignes. Elle ressemble à une feuille de papier millimétré, et elle se comporte comme telle. Les blocs de mise en page se calent sur les limites des cellules, et la densité devient un levier de design au lieu d'un accident.

La page d'accueil du New York Times est la grille modulaire canonique du web. Titres, photos, résumés et pubs s'installent tous dans des cellules aux largeurs et hauteurs cohérentes, même si la composition visible paraît variée. Bloomberg Terminal pousse la grille modulaire à l'extrême, avec une densité d'information qui s'effondrerait sans une discipline de cellule stricte. La vue galerie de Notion livre une grille modulaire plus douce, avec des cartes qui se calent sur une largeur de cellule fixe pendant que le contenu s'adapte à l'intérieur.

Utilisez une grille modulaire quand la page contient beaucoup de petites unités comparables qui doivent se lire comme un système. Évitez-la quand le contenu se résume à un ou deux gros blocs, où une grille en colonnes fait le même travail avec moins de cérémonie. Une grille modulaire qui porte deux cartes, c'est une grille en colonnes en costume.

La grille de ligne de base est le moteur du rythme

Une grille de ligne de base est une grille horizontale qui contrôle le rythme vertical. Chaque ligne de texte repose sur une règle de ligne de base, chaque titre atterrit sur un multiple de cette règle, et la page se lit avec une cadence musicale discrète que l'utilisateur ressent sans jamais la nommer.

Les pages marketing d'Apple suivent une grille de ligne de base stricte. Ouvrez n'importe quelle page produit et regardez comment le titre, le sous-titre, l'image et le texte partagent un rythme vertical commun. Medium applique l'alignement sur ligne de base à son template long format, ce qui explique pourquoi la lecture paraît sans effort même sur un essai de 4000 mots. Stripe Press, la branche édition, fait tourner un rythme de ligne de base sur chaque page imprimée et chaque page publiée sur le web.

Les maths côté web sont simples. Choisissez une unité de base, généralement 8 pixels. Réglez l'interligne du corps de texte sur un multiple, généralement 24 pixels, soit 1,5 fois un texte de 16 pixels.

Les titres tombent aussi sur des multiples, donc un H1 à 48 pixels avec un interligne de 56 pixels reste calé sur le même rythme. Toute la page vrombit sur un seul battement.

La grille hiérarchique sert l'ordre de lecture

Une grille hiérarchique est une grille sur mesure construite autour de la priorité intrinsèque du contenu. Au lieu de partir de colonnes et de lignes, vous partez de ce qui doit se lire en premier, en deuxième, en troisième. La mise en page se cale sur ces décisions, pas sur un template générique.

Les pages de lancement produit d'Apple sont des grilles hiérarchiques à l'état sauvage. L'élément hero reçoit un espace disproportionné, le contenu secondaire se range en grappes serrées, et le contenu tertiaire vit dans une colonne plus étroite vers la fin. Les grands formats du New York Times, ces pièces multimédias à long scroll, sont des grilles hiérarchiques conçues scène par scène. La page d'accueil d'Anthropic fait tourner une grille hiérarchique où une seule affirmation domine et où tout le reste est dimensionné en soutien.

Les grilles hiérarchiques sont le type de grille qui exige le plus de jugement éditorial. Elles échouent quand les designers s'en servent comme prétexte pour esquiver la discipline d'une grille en colonnes ou modulaire. Une grille hiérarchique n'est pas « pas de grille ». C'est une grille où les priorités dictent la géométrie.

Si votre hiérarchie est fausse, la grille est fausse. La logique plus profonde de la priorité se trouve dans le design de la hiérarchie visuelle.

La grille manuscrit sert le format long

Une grille manuscrit, c'est une colonne. C'est toute la grille. Un seul bloc de texte qui descend la page avec des marges réfléchies, une mesure délibérée, et rien d'autre qui se dispute l'œil.

Les livres de Stripe Press sont des grilles manuscrit sur papier. Les pages de doc de Notion sont des grilles manuscrit dans le navigateur. La vue lecteur de Substack, les longs formats d'Apple Newsroom, les articles du Magazine du New York Times en mode colonne unique, tous font tourner la même grille. Le livre sait livrer de la lecture longue depuis cinq siècles. Le web a rattrapé son retard le jour où nous avons arrêté de vouloir coller une barre latérale à côté d'un essai de 4000 mots.

La contrainte, c'est la mesure, la longueur de ligne. Visez 65 à 75 caractères. Plus large, et l'œil perd la ligne au retour. Plus étroit, et le rythme devient haché.

L'autre contrainte, c'est la marge. Des marges latérales généreuses ne sont pas de l'espace gaspillé, elles sont le cadre qui permet à l'œil du lecteur de se détendre. L'entrée du glossaire sur l'espace blanc explique pourquoi ces marges font un vrai travail.

Le système à 12 colonnes fait tourner le web moderne

La grille à 12 colonnes est la norme parce que 12 est le petit nombre le plus divisible. Elle se découpe proprement en 1, 2, 3, 4, 6 et 12. Cela couvre presque tous les schémas de mise en page dont un site marketing ou une UI produit ont besoin, sans recourir aux fractions.

Bootstrap a codifié la grille à 12 colonnes pour le web en 2011 et n'a jamais eu à s'excuser de ce choix. Les utilitaires de grille de Tailwind livrent 12 colonnes par défaut. La grille responsive de Material Design, la grille de Carbon Design, Polaris de Shopify, tous en 12 colonnes. Le choix n'est pas un accident, c'est les maths.

Voici le guide de terrain des 12 colonnes que la plupart des équipes utilisent ou réinventent mal :

• 12 hero pleine largeur, bannière, footer, contenu bord à bord
• 8 + 4 contenu principal avec barre latérale, le shell d'app produit canonique
• 6 + 6 blocs de contenu en duo, lignes de features marketing, sections de comparaison
• 4 + 4 + 4 cartes en trio, paliers de prix, grilles de features à trois colonnes
• 3 + 3 + 3 + 3 logos par quatre, grilles d'équipe, galeries d'images
• 9 + 3 contenu avec fine colonne meta, courant dans les mises en page éditoriales
• 2 + 8 + 2 contenu centré avec de l'air autour, utilisé sur les pages de détail marketing

Figez ces schémas tôt et l'équipe cesse de débattre de la mise en page en revue de design. Le schéma choisit les spans, les spans choisissent les maths, les maths livrent la page. L'argument qui suit dans vous n'avez pas besoin d'un design system est en partie qu'une grille serrée fait l'essentiel de ce qu'un design system prétend faire.

Le rythme de ligne de base sur écran, pas seulement sur papier

L'alignement sur ligne de base est la partie de la théorie des grilles que la plupart des équipes sautent sur le web parce que le navigateur ne l'impose pas. Sautez-la et la page paraît nerveuse pour des raisons que l'utilisateur ne sait pas nommer. Tenez-la et la page paraît être un produit fini.

L'astuce est de penser en unités verticales, pas en pixels. Choisissez une base de 8 pixels. Tous les paddings, marges, interlignes et hauteurs de composants deviennent des multiples de 8.

Un corps de texte à 16 pixels avec un interligne de 24 pixels se cale sur le rythme. Un H1 à 48 pixels avec un interligne de 56 pixels se cale. Un padding de carte à 24 pixels se cale. Un espacement de section à 96 pixels se cale. Toute la page devient un instrument unique accordé sur une seule note, et l'œil peut la parcourir sans un seul accroc.

Linear applique un rythme de ligne de base dans la liste des issues. Notion l'applique dans le lecteur de docs. Le produit Slides de Figma tient le rythme à la fois sur les vignettes de slides et sur le canevas de l'éditeur. Les équipes qui tiennent le rythme sont souvent celles qui traitent la typo comme un système, pas comme une surcharge de feuille de style.

Des grilles responsive sans panique

Une grille responsive est la même grille qui tourne à différentes largeurs. Ce n'est pas un design différent à chaque breakpoint, c'est la même composition qui se replie intelligemment à mesure que le viewport rétrécit.

L'approche standard est une grille de 12 colonnes sur desktop, 8 sur tablette, 4 sur mobile. Une mise en page 4 + 8 sur desktop devient 4 + 4 sur tablette et une colonne unique sur mobile. Une mise en page 3 + 3 + 3 + 3 par quatre devient 4 + 4 (deux rangées de deux) sur tablette et 4 + 4 + 4 + 4 (quatre empilés) sur mobile. Les maths restent cohérentes parce que le nombre de colonnes baisse par fractions nettes.

Le site de Stripe est la grille responsive d'école en production. Les pages marketing de Linear se réorganisent sur trois breakpoints sans une seule mise en page qui paraisse écrasée. La matrice de prix de Vercel se réorganise en repliant la comparaison côte à côte en accordéon empilé, ce qui est l'astuce responsive que la plupart des équipes ne découvrent jamais : « responsive » veut parfois dire « changer le composant, pas les colonnes ». Le problème de la page de tarifs couvre cette décision en détail.

L'erreur est de concevoir mobile et desktop comme deux mises en page sans rapport. Les compositions divergent, la marque se lit différemment sur téléphone et sur laptop, et l'équipe finit par maintenir deux produits. Concevez d'abord la grille, puis concevez les breakpoints comme des repliements de cette grille. L'entrée du glossaire sur la hero section couvre la partie de la grille que les utilisateurs voient en premier à chaque breakpoint.

L'ère CSS Grid : les outils de qualité print sont enfin arrivés

CSS Grid est la première fois que le navigateur a disposé d'une primitive de mise en page à la hauteur de ce que les designers print savaient faire en 1961. Avant CSS Grid, les designers web avaient les floats, Flexbox et beaucoup de patience. Nous avons maintenant de vraies lignes de grille, des zones nommées, le contrôle des gaps, et la capacité de composer une page comme Müller-Brockmann aurait composé une affiche.

Le changement compte parce que ce qui était auparavant une décision de build (quelle grille de quel framework j'utilise) est désormais une primitive de mise en page intégrée au navigateur. display: grid plus grid-template-columns: repeat(12, 1fr) plus gap: 24px, c'est une grille à 12 colonnes. Pas de framework nécessaire. Pas de classes utilitaires. Juste du CSS qui fait ce qu'il aurait dû faire il y a dix ans.

Les utilitaires de grille de Tailwind ne sont plus qu'un fin sucre syntaxique au-dessus de CSS Grid. La grille de Bootstrap est surtout une cale de compatibilité pour un problème qui n'existe plus. Les équipes qui tirent le plus de CSS Grid le traitent comme un outil de design, pas comme un plan B de Flexbox.

L'éditeur de Linear utilise CSS Grid pour la mise en page du panneau d'issue. L'éditeur web de Figma l'utilise pour le chrome du canevas. Vercel l'utilise sur la majeure partie du site marketing. L'outil est dans la boîte, la question est de savoir si le design system s'en sert ou fait tourner des schémas de 2018 sur une infrastructure de 2026.

Des grilles de produits réels qui méritent l'étude

Le moyen le plus rapide d'intégrer les systèmes de grille est d'inspecter les produits qui les livrent bien. Cinq méritent un long regard.

Linear fait tourner une grille en colonnes serrée dans le shell d'app, une grille à 12 colonnes sur le site marketing, et un rythme de ligne de base sur les deux. La liste des issues, la vue projet, le panneau de docs, tout se cale sur la même grille verticale et horizontale. C'est l'implémentation de grille en colonnes la plus propre de l'UI produit en ce moment.

Vercel fait tourner une grille à 12 colonnes avec un espace négatif intentionnel. Les pages marketing respirent, le dashboard utilise une grille modulaire plus dense, et la vue de déploiement, traitée dans l'état de chargement est le produit, utilise une grille hiérarchique où le journal de build domine et où tout le reste lui laisse la place.

Stripe est la grille à 12 colonnes canonique sur la surface marketing et une grille modulaire dans le dashboard. Les cartes du dashboard se calent sur des largeurs cohérentes, les blocs de métriques partagent des hauteurs, et tout le produit se lit comme une seule composition sur plus de trente écrans. L'analyse de l'anti-dashboard couvre la philosophie que cette grille met en œuvre.

Apple livre des grilles hiérarchiques sur les pages produit, un rythme de ligne de base partout, et une grille modulaire dans l'App Store et le Newsroom. La discipline de grille d'Apple est ce qui se rapproche le plus, sur le web, de l'imprimé de l'école suisse, et la plupart des équipes produit sous-estiment la part de l'impression de marque qui vient de la grille seule.

Grilles éditoriales : NYT, Figma et Anthropic

Le New York Times fait tourner une grille modulaire sur la page d'accueil, une grille hiérarchique sur les grands formats, et une grille manuscrit sur les longs articles. La même publication utilise trois grilles délibérément, en basculant de l'une à l'autre selon la tâche éditoriale. Voilà la leçon : le type de grille est une décision de design par surface, pas un réglage global.

Figma fait tourner une grille en colonnes dans le navigateur de fichiers, une grille modulaire dans la bibliothèque d'équipe, et une grille sur mesure à l'intérieur du canevas lui-même. Notion livre une grille manuscrit pour les docs et une grille modulaire pour les bases de données. Loops et Resend, deux produits plus récents, livrent des grilles marketing propres à 12 colonnes et des grilles en colonnes plus serrées dans l'app. Le site d'Anthropic fait tourner une grille hiérarchique où une seule affirmation domine chaque section, calquée sur les mises en page éditoriales plus que sur l'UI produit. Le texte sur l'onboarding sans onboarding montre comment la discipline de grille se prolonge dans les parcours de première utilisation, souvent traités comme des mises en page ponctuelles.

Quand casser la grille (exprès)

Casser la grille ne marche que lorsque la grille est assez visible pour que la rupture se lise comme un choix délibéré. Sans grille derrière la rupture, l'élément cassé n'est qu'un truc mal aligné sur une page.

La page produit Apple qui laisse une image hero dépasser la marge casse une grille qui tient serré partout ailleurs. La feature du NYT où une photographie explose en pleine page au milieu de l'essai casse une grille qui fait tourner des modules disciplinés au-dessus et en dessous. La page d'accueil d'Anthropic laisse parfois une citation unique hors axe, à deux fois la taille attendue, et le geste marche parce que tout ce qui l'entoure est boutonné jusqu'au col.

La règle : une rupture par surface. Deux ruptures se lisent comme une absence de grille. La rupture doit être le moment le plus mémorable de la page. Si vous ne pouvez pas pointer la grille que l'élément casse, vous ne cassez pas une grille, vous décorez une mise en page sans structure. L'entrée du glossaire sur le wireframe couvre la décision précoce de la grille à laquelle vous vous engagez.

La discipline du panneau de réglages dans le problème de la page de réglages est une leçon voisine. Les pages de réglages sont souvent l'endroit où la discipline de grille s'effondre, parce que chaque réglage paraît assez différent pour mériter sa propre mise en page. Ce n'est pas le cas. Tenez la grille, laissez le contenu varier à l'intérieur.

La grille est la marque, même quand personne ne la montre du doigt

Si vous retiriez les couleurs, la typo et les images de n'importe quel produit cité dans cet article, les grilles resteraient reconnaissables. La grille de Linear aurait toujours l'air de Linear. La grille de Stripe aurait toujours l'air de Stripe. La grille est l'artefact de marque le plus profond qu'un produit livre, parce que c'est celui que l'utilisateur ressent sans jamais le voir consciemment.

Choisissez un type de grille, un nombre de colonnes, une unité de ligne de base. Tenez-les sur toutes les surfaces pendant un an et la marque commencera à émerger de la structure, pas du traitement de surface. C'est tout le secret que l'école suisse a enseigné et que la plupart des équipes produit réapprennent sans cesse. La grille fait le travail. Le reste est de la décoration qui réussit ou échoue selon que la grille était là pour la porter.

FAQ

Quelle est la différence entre une grille en colonnes et une grille modulaire ?

Une grille en colonnes divise le canevas en colonnes verticales uniquement, donc les blocs couvrent une ou plusieurs colonnes et le rythme est horizontal. Une grille modulaire divise le canevas en cellules dans les deux directions, colonnes et lignes, donc les blocs se calent sur des cellules et la densité devient une propriété conçue. Les grilles en colonnes gèrent les sites marketing et la plupart des shells d'app. Les grilles modulaires gèrent les dashboards, les mises en page éditoriales, et toute UI où de nombreuses petites unités comparables doivent se lire comme un système.

Pourquoi la grille à 12 colonnes est-elle la norme ?

12 est le petit nombre le plus divisible. Il se découpe proprement en 1, 2, 3, 4, 6 et 12, ce qui couvre presque tous les schémas de mise en page (pleine largeur, moitiés, tiers, quarts, sixièmes) sans fractions. Bootstrap l'a codifiée en 2011, Tailwind la livre par défaut, et chaque grand design system depuis a repris ce choix parce que les maths, c'est les maths.

Ai-je encore besoin d'un framework CSS maintenant que CSS Grid existe ?

Pour la mise en page, non. display: grid avec grid-template-columns: repeat(12, 1fr) et gap, c'est une grille à 12 colonnes en trois lignes de CSS. Des frameworks comme Bootstrap et Tailwind apportent de la valeur par leurs conventions de composants, leurs raccourcis utilitaires et la cohérence à l'échelle de l'équipe, mais la primitive de mise en page elle-même est désormais une fonctionnalité du navigateur. Utilisez le framework s'il accélère votre équipe. Ne l'utilisez pas parce que vous croyez en avoir besoin pour les grilles.

FAQ : livrer et casser la grille

Comment garder le rythme de ligne de base dans un vrai produit ?

Choisissez une unité de base, généralement 8 pixels. Faites de chaque padding, marge, interligne et dimension de composant un multiple de cette unité. Texte de corps à 16 pixels avec un interligne de 24 pixels.

Titres à 32, 40, 48 ou 56 avec des interlignes à 40, 48, 56 ou 64. Espacement de section à 96 ou 128. La discipline est ennuyeuse, le résultat est une page qui se lit comme un produit fini au lieu d'un brouillon.

Quand dois-je casser la grille ?

Une fois par surface, quand la grille est assez visible pour que la rupture se lise comme délibérée. La rupture doit être le moment le plus mémorable de la page. Si vous ne pouvez pas pointer la grille que l'élément casse, la page n'a pas encore de grille, elle a une mise en page. Réglez d'abord la grille, cassez-la ensuite.

CTA

Si vous voulez une équipe qui conçoit les systèmes de grille comme la colonne vertébrale du produit plutôt que comme une réflexion de dernière minute avant le lancement, engagez Brainy. Nous livrons des produits où la grille fait le travail, où la marque se lit d'un coup d'œil, et où le rythme tient sur chaque surface. Müller-Brockmann aurait approuvé. Vos utilisateurs aussi, même sans jamais savoir quelle grille ils regardent.