Qu’est-ce qu’une grille à 12 colonnes ?

Une grille à 12 colonnes divise la page en douze colonnes de largeur égale séparées par des gouttières fixes, et les éléments sont dimensionnés en s’étendant sur des colonnes entières — une barre latérale s’étend sur trois, le contenu principal sur neuf. Les colonnes elles-mêmes sont un échafaudage invisible ; ce que le lecteur perçoit, c’est l’alignement, parce que chaque bloc de la page commence et se termine sur le même petit ensemble d’arêtes.

C’est la convention de travail de la mise en page d’interface depuis près de deux décennies, et elle a survécu aux frameworks qui l’ont popularisée. Cet article — le pilier de notre guide de la grille de mise en page — explique pourquoi le nombre est douze, d’où vient la convention, quelles sont ses parties, et à quoi ressemble l’arithmétique avec des chiffres réels.

Pourquoi douze colonnes et pas dix ou seize ?

La divisibilité. Douze se divise sans reste par 2, 3, 4 et 6, donc les divisions à partir desquelles les pages sont réellement construites — moitiés, tiers, quarts, sixièmes — tombent toutes sur des colonnes entières :

Dix vous offre les cinquièmes — une division que les mises en page appellent rarement — au prix des tiers et des quarts, dont elles ont constamment besoin. Seize conserve les moitiés, les quarts et les huitièmes mais perd les tiers, et les tiers sont l’épine dorsale des rangées de cartes et des sections de présentation. Douze est le plus petit nombre qui conserve toutes les divisions que les designers utilisent couramment.

La version intuitive : une grille n’aide que tant que la mise en page que vous voulez tombe sur des colonnes entières. Dès qu’un design a besoin d’une demi-colonne, la grille a cessé d’être un guide pour devenir un obstacle. Douze rend ce moment rare.

D’où vient la grille à 12 colonnes ?

Les journaux divisaient leurs pages en colonnes bien avant les écrans, pour des raisons pratiques — les lignes courtes se composent plus vite et se lisent plus dense. Josef Müller-Brockmann et l’école suisse du milieu du XXe siècle ont transformé cette pratique en une méthode de conception formelle — les systèmes de grille comme le squelette rationnel sous une page. Le web s’est ensuite fixé sur douze en particulier grâce à 960.gs puis à Bootstrap, dont les grilles à base de classes ont fait des 12 colonnes le vocabulaire par défaut de toute une génération de développeurs ; CSS Grid a fini par rendre la machinerie des frameworks inutile, et la convention a survécu sans elle — parce que c’est l’accord, et non le code, qui a toujours été la partie utile.

Quelles sont les parties d’une grille à 12 colonnes ?

Quatre, au comportement délibérément différent :

• Colonnes — les douze unités fluides. Leur largeur n’est pas choisie directement ; c’est ce qui reste une fois les parties fixes retirées.
• Gouttières — les espaces fixes entre les colonnes, au nombre de onze.
• Marges — l’espace fixe de chaque côté, entre les colonnes extérieures et le bord du conteneur.
• Conteneur — le plafond de l’ensemble. En dessous de sa largeur maximale la grille est fluide ; au-delà, la mise en page cesse de grandir.

Une seule règle les relie : les gouttières et les marges sont prélevées d’abord, et les douze colonnes se partagent ce qui reste. C’est toute l’arithmétique — la largeur que doivent avoir les gouttières et les marges est une question d’espacement avec ses propres règles proportionnelles.

À quoi ressemble l’arithmétique avec des chiffres réels ?

Prenez un conteneur de 1200px avec des gouttières de 23px et des marges de 32px — la gouttière et la marge sont toutes deux des paliers d’une échelle d’espacement :

fixed width   = 2 × 32 + 11 × 23 = 64 + 253 = 317px
leftover      = 1200 − 317       = 883px
column width  = 883 ÷ 12         ≈ 73.6px

Maintenant, projetez des mises en page dessus. La largeur d’une travée, ce sont ses colonnes plus les gouttières à l’intérieur d’elle — s’étendre absorbe les gouttières traversées :

La travée de contenu donne 8 × 73,6 + 7 × 23 ≈ 750px, la barre latérale 4 × 73,6 + 3 × 23 ≈ 363px. Ajoutez la seule gouttière qui les sépare encore — 750 + 23 + 363 = 1136 — et vous revenez au conteneur moins ses marges (1200 − 64). Les comptes s’équilibrent à chaque niveau, et c’est ce qui rend une grille vérifiable plutôt qu’approximative.

Ouvrez cette anatomie à 12 colonnes dans Scale Composer — les colonnes, la gouttière, la marge et le conteneur se règlent chacun par point de rupture dans la vue grille, les mesures parcourent l’échelle d’espacement partagée avec les touches fléchées, et l’arithmétique du reste se recalcule à mesure que vous avancez.

Quels sont les motifs de travées courants ?

Une poignée de motifs couvrent la plupart des pages, et ils découlent tous directement du tableau de divisibilité :

Les variantes asymétriques — 9 + 3, 7 + 5 — sont tout aussi légitimes ; elles échangent les divisions nettes contre une emphase plus particulière.

Tout doit-il s’aligner sur les colonnes ?

Non — et c’est la surinterprétation la plus courante du système. La grille positionne les conteneurs, pas leur contenu. Une carte qui s’étend sur quatre colonnes n’a pas besoin que son rembourrage interne, son bouton ou ses retours à la ligne tombent sur les arêtes des colonnes ; à l’intérieur de la carte, ce sont les propres règles d’espacement de la carte qui prennent le relais. Forcer chaque élément intérieur sur la grille de page produit des mises en page techniquement alignées et concrètement rigides. La grille à 12 colonnes est un accord au niveau de la page sur l’endroit où les blocs commencent et se terminent — le niveau supérieur d’une hiérarchie, pas une loi qui descend jusqu’en bas.

Placez vos propres travées sur la grille

Les motifs s’ancrent plus vite quand vous les placez vous-même. Chargez la grille à 12 colonnes et parcourez les mises en page du tableau — 8 + 4, puis 6 + 6, puis 4 + 4 + 4 — et observez chaque travée absorber ses gouttières intérieures. L’export CSS de la vue grille écrit la même arithmétique sous forme de media queries avec les classes .grid et .col-1 à .col-12, les travées bornées au nombre de colonnes du point de rupture actif, de sorte que ce que vous disposez est ce qui part en production — placez des travées sur la grille à 12 colonnes dans Scale Composer.