Gouttières et espaces : l’espacement entre les colonnes

Une gouttière est l’espace entre les colonnes d’une grille de mise en page — la distance que le CSS moderne appelle gap. Les largeurs courantes sont de 16px sur les téléphones et de 24px sur les tablettes et les ordinateurs de bureau ; dans une mise en page systématisée, la gouttière n’est pas un nombre sur mesure mais un pas de l’échelle d’espacement, choisi par point de rupture.

Le mot est bien plus ancien que le CSS, et les règles pour le dimensionner sont proportionnelles plutôt que fixes. Cet article explique d’où vient le terme, quelle largeur donner aux gouttières, comment le trio colonne–gouttière–marge divise une page, et le CSS qui l’implémente — un coin du plus vaste système d’espacement.

Pourquoi parle-t-on de gouttière ?

Un héritage de l’imprimerie. Dans un livre relié, la gouttière est la marge intérieure où deux pages en vis-à-vis se rejoignent — le couloir de blanc qui plonge vers la reliure. Les systèmes de grille typographique ont emprunté le mot pour l’espace entre deux colonnes de texte quelconques, et la mise en page numérique en a hérité de ces grilles d’imprimerie, avec l’essentiel de son vocabulaire de colonnes. Le CSS, qui a standardisé la propriété des décennies plus tard, a choisi le nom plus simple : gap. Les designers ont tendance à parler de gouttière, les feuilles de style de gap ; les deux désignent la même distance.

Quelle largeur donner à une gouttière ?

Les réponses courantes sont 16px sur mobile et 24px sur tablette et ordinateur de bureau, et ce sont des valeurs par défaut raisonnables tirées directement de la grille de 8 points. Mais les nombres fixes masquent la vraie règle, qui est proportionnelle. Une gouttière se dimensionne par rapport à deux voisins :

• La largeur de colonne. Environ un quart à un tiers d’une colonne sépare proprement — assez large pour que les colonnes adjacentes ne se fondent pas les unes dans les autres, assez étroit pour que la page ne se disloque pas en bandes.
• La marge de la page. La gouttière ne doit pas dépasser la marge. Quand c’est le cas, la mise en page fuit sur les bords : les colonnes les plus extérieures se retrouvent plus proches du bord de la fenêtre d’affichage que de leurs propres voisines.

Le mécanisme perceptuel derrière ces deux règles est le regroupement par proximité, dans le vocabulaire de la Gestalt : les éléments séparés par moins d’espace sont perçus comme allant ensemble. Les colonnes tiennent ensemble comme une seule page parce que l’espace entre elles est visiblement plus petit que l’espace qui les entoure. Inversez cette relation et les colonnes extérieures commencent à se regrouper avec le bord de la fenêtre d’affichage plutôt qu’entre elles.

Comment les colonnes, les gouttières et les marges se rapportent-elles ?

Les trois membres du trio ont un comportement délibérément différent :

Une seule formule les relie : largeur de colonne = (conteneur − 2 × marge − (n − 1) × gouttière) ÷ n. Les membres fixes se retranchent d’abord ; les colonnes se partagent ce qui reste. C’est pourquoi les gouttières et les marges sont des pas d’échelle naturels alors que les largeurs de colonne le sont rarement — les colonnes sont l’endroit où l’arithmétique se plie.

À quoi ressemblent les nombres réels à 4, 8 et 12 colonnes ?

En utilisant l’échelle d’espacement générée à partir d’une base de 16px, d’un ratio 2 et de deux notes par doublement — 8, 11, 16, 23, 32, 45, 64 — le pas le plus proche du 24 conventionnel est 23 (16 × 2^(1/2) = 22,63, arrondi) :

Les totaux se vérifient ligne par ligne : 4 × 73,75 + 3 × 16 + 2 × 16 = 375, et 12 × 73,58 + 11 × 23 + 2 × 32 = 1200. Deux choses méritent d’être remarquées. Les largeurs de colonne oscillent entre 73 et 77px sur les trois points de rupture — des appareils différents, des colonnes au ressenti identique — tandis que le rapport gouttière/colonne reste dans la bande d’un quart à un tiers (16 / 73,75 ≈ 22 % sur mobile, 23 / 73,6 ≈ 31 % sur bureau). Et la marge ne descend jamais en dessous de la gouttière.

Ouvrez cette grille à trois points de rupture dans Scale Composer — la vue grille utilise par défaut 4, 8 et 12 colonnes par point de rupture à l’intérieur d’une largeur maximale de conteneur globale, avec des gouttières et des marges tirées de la même échelle que tout le reste.

Quel est le CSS pour une gouttière ?

grid-template-columns déclare les colonnes ; gap est la gouttière :

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* colonnes fluides */
  gap: 23px;                               /* gouttière — un pas de l'échelle */
  max-width: 1200px;                       /* conteneur */
  padding-inline: 32px;                    /* marge de page, un pas au-dessus */
  margin-inline: auto;
}

Les colonnes 1fr sont le membre fluide du trio : le navigateur exécute le même calcul du reste que le tableau ci-dessus, à chaque largeur de fenêtre. gap fonctionne aussi en flexbox et en mise en page multi-colonnes, et accepte une forme à deux valeurs — gap: 32px 23px définit séparément les espaces de ligne et de colonne, ce qui commence à compter dès qu’une grille se répartit sur plus d’une rangée. Avant que gap n’atteigne les grilles et le flexbox, les gouttières étaient simulées avec des marges sur les colonnes et une marge négative sur le conteneur — un motif à savoir reconnaître dans les anciennes bases de code, pas à reproduire.

Faites défiler les gouttières le long de l’échelle

Les règles de dimensionnement s’ancrent plus vite quand la mise en page bouge. Chargez le point de rupture bureau et faites défiler la gouttière à travers les pas d’échelle voisins — 16, 23, 32 — la marge maintenue à 32 : à 16, les douze colonnes commencent à se tasser, et à 32, la gouttière rattrape la marge et la page commence à perdre son cadre. Une touche par pas, c’est là toute l’expérience — faites défiler les gouttières et les marges le long de l’échelle avec vos touches fléchées dans Scale Composer.