Grilles de mise en page et points de rupture : le guide pratique

Une grille de mise en page est le contrat horizontal de la page : un nombre convenu de colonnes par point de rupture, avec des gouttières fixes entre elles et des marges autour d’elles, contre lequel chaque écran se compose. La grille de bureau à 12 colonnes — 8 sur tablette, 4 sur téléphone — est la convention de travail de la mise en page d’interface moderne, et ce hub rassemble nos guides sur son utilisation avec le CSS d’aujourd’hui ; l’orientation la plus rapide est la grille à trois points de rupture, en direct.

La grille a survécu aux frameworks

Les frameworks de grille fondés sur des classes sont morts quand CSS Grid est arrivé — plus personne n’a besoin de la machinerie col-md-6. Ce qui a survécu, c’est la couche design : les équipes s’accordent encore sur les colonnes, les gouttières et les marges, parce que des mises en page construites par de nombreuses personnes sur de nombreux mois ont besoin d’un squelette partagé pour rester cohérentes. Les guides présentés ici traitent la grille comme cet accord, mis en œuvre en quelques lignes de CSS moderne plutôt que dans un framework. La raison intuitive pour laquelle cet accord survit, c’est que l’alignement se lit comme une intention : des éléments qui partagent des bords paraissent délibérés, des dizaines de largeurs légèrement différentes paraissent accidentelles, et un ensemble de colonnes partagé fait du premier cas la valeur par défaut plutôt qu’un acte de vigilance. Qu’est-ce qu’une grille à 12 colonnes part de zéro — pourquoi douze, ce que sa divisibilité apporte — et construire la grille en CSS pur montre la mise en œuvre moderne : quelques propriétés personnalisées et une seule règle display: grid là où se trouvait le framework.

Trois nombres par point de rupture

Chaque palier de la grille, ce sont des colonnes, une gouttière et une marge — et l’arithmétique les lie : les gouttières et les marges fixes se prélèvent sur le conteneur, les colonnes se partagent le reste. Nos guides couvrent les proportions de ce trio, pourquoi le nombre de colonnes diminue sur les écrans plus petits, où se placent réellement les points de rupture (le contenu, pas les appareils), et la largeur de conteneur qui garde le texte lisible — avec le raisonnement sur la longueur de ligne de notre guide de typographie qui fait le lien. 4, 8, 12 : colonnes par point de rupture explique pourquoi le nombre diminue sur les écrans plus petits — moins de mises en page sensées, pas des calculs différents ; points de rupture : le contenu avant les appareils plaide pour ajouter un palier là où la mise en page commence à se dégrader plutôt que là où un tableau d’appareils le dit ; choisir une largeur maximale de conteneur calcule le plafond à partir des colonnes elles-mêmes ; et colonnes fixes ou fluides tranche ce qui s’étire et ce qui reste en place entre les paliers.

Composer sur la grille

Une grille convenue ne justifie sa place que lorsque le contenu s’y pose, et les mises en page réelles remplissent rarement douze cellules égales. Étendues de colonnes et imbrication couvre la mécanique des éléments qui prennent quatre, six ou huit colonnes — et des grilles à l’intérieur de grilles, là où se font la plupart des erreurs d’étendue. Certaines sections doivent échapper entièrement au conteneur, c’est le problème du fond perdu : une couleur bord à bord derrière le contenu qui reste malgré tout alignée sur les colonnes. Du côté des outils de design, les grilles de mise en page dans Figma reflètent les mêmes paliers, pour que les maquettes et le CSS se mesurent à un seul squelette plutôt qu’à deux approximations de celui-ci.

Une seule échelle, mise en page comprise

La même échelle qui espace la typographie et les composants peut cadencer les mesures de la grille : gouttières et marges comme pas de la même échelle d’espacement, les tokens de mise en page exportés à côté de la couleur et de la typographie. Les décisions de grille cessent d’être un dialecte à part — c’est la même histoire de source unique racontée dans design tokens, étendue au squelette de la page. C’est ainsi que Scale Composer traite la mise en page : points de rupture, colonnes, gouttières et une largeur de conteneur globale vivent à côté des vues couleur et typographie, cadencés par l’unique échelle qui pilote les trois, et atterrissent dans le même fichier de tokens à l’export.

Guides de ce hub

• 4, 8, 12 : colonnes par point de rupture

  Les colonnes d'une grille responsive passent de 12 à 8 puis à 4 à mesure que les écrans se rétrécissent, car une grille ne guide que lorsqu'une colonne a une taille utilisable — avec les calculs détaillés par palier.

• Choisir une largeur maximale de conteneur

  La largeur maximale de conteneur, expliquée : pourquoi les mises en page se plafonnent près de 1200px, l'arithmétique inverse à partir d'une colonne de texte lisible, et quand une mise en page fluide s'impose.

• Colonnes fixes ou fluides

  Grille fixe ou fluide : la plupart des mises en page modernes gardent gouttières et marges fixes tandis que les colonnes se déforment entre les points de rupture — ce que chaque modèle apporte, avec des chiffres réels.

• Configurer les grilles de mise en page dans Figma

  Configurez une grille de mise en page Figma par point de rupture : colonnes en mode étirement avec gouttières et marges fixes, enregistrées comme styles de grille, avec des valeurs alignées sur le code.

• Construire la grille en CSS pur

  Un système de grille CSS en une vingtaine de lignes : des propriétés personnalisées portent les décisions de chaque point de rupture, trois classes les consomment, et les portées se clampent selon le palier.

• Étendues de colonnes et imbrication

  Comment fonctionne l'étendue de colonnes sur une grille : la grammaire des étendues, les motifs de page comme 8+4 et 4+4+4, le choix des étendues selon le contenu et l'alignement, et l'imbrication propre des grilles.

• Points de rupture : le contenu plutôt que les appareils

  Les points de rupture CSS ont leur place là où la mise en page échoue — longueur de ligne, barres latérales affamées, cartes à l'étroit — pas sur un tableau d'appareils. Pourquoi les valeurs quasi standard fonctionnent quand même.

• Qu'est-ce qu'une grille à 12 colonnes ?

  Une grille à 12 colonnes divise la page en douze colonnes égales avec des gouttières fixes. Pourquoi douze l'emporte : les moitiés, les tiers, les quarts et les sixièmes tombent tous sur des colonnes entières.

• Sections pleine largeur dans un conteneur

  Le full bleed en CSS sans quitter le conteneur : comment les héros et les bandes média échappent à la max-width pendant que leur contenu reste sur la grille — deux patterns modernes.

Déplacez la grille et regardez la page

Les proportions de grille s’apprennent le plus vite sous les touches fléchées : faites défiler les gouttières et les marges à travers l’échelle — 4, 8 et 12 colonnes par point de rupture à l’intérieur d’un conteneur global — et regardez la mise en page se resserrer et respirer un pas à la fois. Dix secondes de défilement expliquent la proportion des gouttières mieux que n’importe quel schéma.