4, 8, 12 : colonnes par point de rupture

Placez une grille à 12 colonnes sur un téléphone de 375px et observez ce qui lui arrive. Même en réduisant les marges à zéro et en comprimant les gouttières à 8px, chaque colonne fait (375 − 11 × 8) ÷ 12 ≈ 24px de large. Rien de réel n’y tient — ni bouton, ni champ de saisie, ni vignette. Une modeste carte de 300px occupe dix des douze colonnes, si bien que chaque élément finit par choisir entre « presque tout » et « tout », les largeurs intermédiaires restent inutilisées, et la grille continue de tracer des repères sans en éclairer aucune décision.

Les grilles responsive réduisent donc le nombre de colonnes au lieu de rétrécir les colonnes : 4 colonnes sur téléphone, 8 sur tablette, 12 sur ordinateur, la largeur de colonne restant à peu près constante sur les trois. Le nombre est le levier qui s’adapte ; l’unité conserve une taille significative. Cet article — qui fait partie de notre guide des grilles de mise en page — explique pourquoi cette inversion fonctionne, à quoi ressemblent les vrais chiffres par palier, et comment une même mise en page se décline sur les trois.

Pourquoi réduire le nombre de colonnes plutôt que rétrécir les colonnes ?

Parce qu’une grille ne guide que tant que son unité a une taille significative — une largeur que quelque chose sur la page pourrait réellement avoir. Quand une colonne fait ≈24px, déplacer une limite d’une colonne ne change presque rien, et aucun élément réel n’occupe un petit nombre dénombrable de colonnes ; la grille est devenue décorative. Sur une grille de téléphone à 4 colonnes, le même viewport de 375px avec des gouttières et des marges de 16px donne des colonnes de (375 − 32 − 48) ÷ 4 ≈ 74px — et les largeurs correspondent désormais aux mises en page qu’un téléphone utilise réellement : 4 c’est la pleine largeur, 2 c’est une moitié, 1 c’est une unité d’un quart de largeur pour les icônes et les avatars. Chaque largeur disponible redevient un vrai choix.

Pourquoi 4, 8 et 12 — et pas une autre progression ?

Chaque nombre correspond au vocabulaire de mise en page de son écran. Un téléphone compose en pleines largeurs, en moitiés et parfois en quarts — 4 colonnes couvrent exactement cela. Une tablette ajoute les dispositions en deux et les barres latérales étroites — 8 colonnes apportent des quarts utilisables (largeurs de 2) et des partages avec barre latérale comme 5 + 3 et 6 + 2. Un ordinateur a besoin du vocabulaire complet, tiers compris — soit 12.

La progression préserve aussi les proportions d’un palier à l’autre. Parce que 4 doublé donne 8, les moitiés restent des moitiés (2 sur 4, 4 sur 8) et les quarts restent des quarts (1 sur 4, 2 sur 8) ; 12 conserve les deux (6 et 3) et ajoute les tiers. Une mise en page de tablette à 8 colonnes en 6 + 2 se transpose sur le 9 + 3 de l’ordinateur par simple proportion. Les designs ne se traduisent pas d’un palier à l’autre par hasard — les nombres sont choisis pour que ce soit possible.

Qu’est-ce qui change selon le point de rupture — et qu’est-ce qui reste constant ?

Moins que vous ne pourriez le penser. Voici les valeurs par défaut de la vue grille de Scale Composer, avec le total de grille calculé comme colonnes × largeur de colonne + (colonnes − 1) × gouttière + 2 × marge :

Les totaux se vérifient ligne par ligne : 4 × 66 + 3 × 16 + 2 × 16 = 344, juste à l’intérieur de l’aperçu de 375px ; 8 × 66 + 7 × 24 + 2 × 29 = 754 ≈ 768 ; et 12 × 66 + 11 × 24 + 2 × 66 = 1188 ≈ 1200.

Parcourez les colonnes du tableau et la répartition des rôles est claire. Les gouttières et les marges augmentent modestement (16 → 24, 16 → 29 → 66). La largeur de colonne ne bouge pas du tout — 66px à chaque palier, si bien qu’une unité d’une colonne se ressent de la même façon sur un téléphone que sur un ordinateur. C’est le nombre de colonnes qui porte toute l’adaptation : 4, 8, 12.

Ouvrez la grille à trois paliers dans Scale Composer — la vue grille contient un système de mise en page par point de rupture, chacun avec ses propres colonnes, largeur de colonne, gouttière et marge, et les mesures parcourent l’échelle partagée avec les touches fléchées.

Comment une même mise en page se décline-t-elle sur les paliers ?

Les empans de colonnes sont des décisions prises par palier, pas des valeurs mises à l’échelle. Suivez une page d’atterrissage à trois sections à travers les trois paliers :

Remarquez ce que la colonne du milieu impose. Huit n’a pas de tiers, donc la rangée de cartes ne peut pas survivre au passage depuis l’ordinateur en tant que rangée — les options honnêtes sont deux par ligne avec la troisième qui passe en dessous, ou un empilement complet. Et la mise en page d’article en 8 + 4 ne devient pas « 5,3 + 2,7 » sur tablette ; elle devient une décision différente (contenu en pleine largeur, barre latérale reléguée). Un palier avec moins de colonnes n’est pas un ordinateur rétréci — c’est un vocabulaire plus restreint, et la mise en page y est reformulée.

En CSS, cela correspond à une déclaration grid-template-columns par palier à l’intérieur de media queries — l’emplacement de ces limites de paliers est une question de contenu, pas de modèles d’appareils. Les mécanismes sont documentés dans la référence CSS grid layout de MDN. Ce que le code ne peut pas décider à votre place, c’est la reformulation elle-même : les empans attribués à chaque palier relèvent du design, pas de l’arithmétique.

Vérifiez les totaux à chaque palier

Le tableau ci-dessus inspire plus confiance une fois que vous l’avez cassé. Chargez les trois paliers et changez une variable à la fois : faites passer l’ordinateur de 12 colonnes à 8 et observez la largeur de colonne que l’arithmétique restante vous rend ; montez une gouttière d’un cran sur l’échelle et observez le total de grille s’éloigner de son point de rupture. Les totaux se recalculent en direct, si bien que chaque configuration affiche sa propre arithmétique — vérifiez vous-même les totaux par palier dans Scale Composer.