Choisir une largeur maximale de conteneur

Faites une petite mesure avant toute théorie. Ouvrez un site riche en texte auquel vous faites confiance — un journal, un site de documentation, un magazine de fond — sur l’écran le plus large dont vous disposez, et élargissez lentement la fenêtre du navigateur, du plus étroit au plein écran. La mise en page grandit avec la fenêtre un moment, puis, quelque part au-delà de 1100px, elle s’arrête : les colonnes se figent, et chaque pixel de fenêtre supplémentaire part dans les marges vides de chaque côté. Mesurez quelques sites avec la règle des devtools et les points d’arrêt se regroupent — la plupart se situent entre 1100 et 1400px.

Ce point d’arrêt, c’est la largeur maximale de conteneur : le plafond sur la largeur qu’une mise en page peut atteindre. Sous le plafond, la grille est fluide et absorbe la zone d’affichage ; au-delà, les colonnes conservent leur taille, la page reste centrée, et les marges absorbent tout le reste. C’est un seul nombre qui plafonne chaque mise en page du système, et cet article — qui fait partie de notre guide de la grille de mise en page — explique pourquoi ce plafond existe, d’où viennent les valeurs courantes, et quand le désactiver.

Que fait réellement une largeur maximale de conteneur ?

Elle divise la plage de la zone d’affichage en deux régimes. Sous le plafond, les colonnes de la grille se partagent la largeur qu’offre la fenêtre — le régime fluide, où la mise en page et la zone d’affichage ne font qu’un. Au-dessus du plafond, la mise en page se détache de la fenêtre : la grille conserve la largeur pour laquelle elle a été conçue, reste centrée, et ce sont les marges qui grandissent. En CSS, tout le motif tient en max-width plus des marges en ligne automatiques :

.container {
  max-width: 1200px;    /* le plafond */
  margin-inline: auto;  /* centre la page plafonnée */
  padding-inline: 66px; /* les marges extérieures de la grille */
}

Le choix de max-width plutôt que width est ce qui procure les deux régimes avec une seule propriété : un width: 1200px fixe déborderait sur les petits écrans, alors que max-width ne s’applique qu’une fois que la fenêtre le dépasse.

Pourquoi plafonner la mise en page ?

Trois raisons, par ordre décroissant d’importance.

Longueur de ligne. Le texte courant se lit le mieux autour de 45 à 75 caractères par ligne — la fourchette typographique établie de longue date — et une colonne sans plafond ignore complètement ce budget : sur un écran de 2560px, un paragraphe pleine largeur à 16px atteint environ (2560 − 132) ÷ 8 ≈ 300 caractères par ligne, plusieurs fois au-delà du haut de la fourchette. C’est la défaillance qui rend les plafonds non négociables pour tout ce qui est destiné à être lu.

Distance d’interaction. Les contrôles liés s’éloignent les uns des autres à mesure que la mise en page s’étire : un panneau de filtres ancré au bord gauche et les résultats qu’il commande dérivant vers la droite peuvent finir à plus d’un demi-écran de distance sur un affichage ultra-large, et chaque regard de l’un à l’autre devient un mouvement de tête au lieu d’un mouvement des yeux.

Composition. Une mise en page conçue à 1200px ne conserve pas ses proportions à 2400 : l’équilibre image-texte du hero, les rapports d’espace blanc, le poids visuel d’une rangée de cartes s’étirent tous hors des ratios dans lesquels ils ont été conçus. Le plafond, c’est ce qui permet à une composition de rester la composition.

D’où viennent les valeurs courantes ?

La fourchette 1100–1400px domine parce que c’est là qu’atterrissent douze colonnes d’une largeur de texte lisible, plus leurs gouttières et leurs marges. Vous pouvez dérouler l’arithmétique à l’envers et regarder la convention s’assembler d’elle-même.

Partez du texte. Le texte courant de fond se compose couramment autour de 18–21px ; à 21px un caractère moyen occupe ≈10,5px, si bien qu’une ligne de 66 caractères — la mesure confortable classique — exige une colonne de ≈693px. Attribuez à cette colonne d’article 8 des 12 colonnes de la grille. Avec des gouttières de 24px, la portée doit satisfaire 8 × largeur de colonne + 7 × 24 ≈ 696px, ce qui se résout à une largeur de colonne de 66px. Faites maintenant le total de toute la grille avec les valeurs par défaut de Scale Composer pour le bureau :

12 × 66  (colonnes)   =  792px
11 × 24  (gouttières) =  264px
 2 × 66  (marges)     =  132px
                        ──────
total grille          = 1188px  ≈ la convention 1200px

Des tailles de texte plus petites décalent les portées, pas la conclusion — à 16px, une colonne de 66 caractères fait ≈528px, proche d’une portée de 6 sur 12 (≈516px). Dans les deux cas, le plafond atterrit dans le même voisinage, parce qu’il répond à la même question : la largeur maximale de conteneur est la largeur à laquelle une grille de 12 colonnes remplie de texte lisible n’a plus de raison de grandir. La fourchette 1100–1400px n’est pas une mode ; c’est cette arithmétique évaluée avec différentes tailles de texte et gouttières.

Ouvrez l’anatomie du conteneur 1200px dans Scale Composer — la largeur maximale de conteneur est une seule valeur globale sur tous les points de rupture, et les douze colonnes de 66px du palier bureau, avec des gouttières de 24px et des marges de 66px, totalisent 1188px à l’intérieur.

Quand une mise en page ne doit-elle pas être plafonnée ?

Deux exceptions établies, une partielle et une totale.

Sections pleine largeur. Les heros, les bandes médias et les aplats de couleur bord à bord échappent au conteneur — mais leur contenu reste à l’intérieur. Le motif : une section extérieure sans max-width qui porte l’arrière-plan, et un conteneur intérieur, plafonné et centré, qui porte le texte et les contrôles :

.band {
  /* pleine largeur : l'arrière-plan et l'imagerie vont de bord à bord */
}
.band > .container {
  max-width: 1200px;    /* le contenu à l'intérieur reste plafonné */
  margin-inline: auto;
  padding-inline: 66px;
}

La bande obtient le spectacle de toute la zone d’affichage ; le titre à l’intérieur reste aligné avec toutes les autres sections plafonnées de la page.

Applications à forte densité de données. Les tableaux de bord, les tableaux de données et les éditeurs exploitent véritablement la largeur — 400px de plus, c’est une colonne de données visible supplémentaire, une heure de plus sur la timeline. Une règle empirique praticable, présentée comme telle : les documents se lisent, les applications s’utilisent — la lecture a besoin du plafond, l’utilisation souvent non. Bien des produits sont honnêtement les deux, et coupent la poire en deux : les pages marketing et de documentation plafonnées, la surface applicative fluide.

Désactivez le plafond et observez

La distinction se saisit le plus vite quand vous la basculez. Dans Scale Composer, le conteneur est une unique largeur maximale globale, et il peut être entièrement désactivé — le cas de la mise en page fluide. Désactivez-le et regardez la grille bureau s’emparer de tout l’aperçu : les colonnes s’étirent, le total de la grille court après la zone d’affichage, et les portées de texte dimensionnées pour la lecture dépassent leur fourchette — désactivez le conteneur et regardez la grille devenir fluide.