Sections pleine largeur dans un conteneur

Un bras de fer de mise en page bien connu : la page vit dans un conteneur de 1200px — comme il se doit, pour les raisons de largeur de lecture qui justifient les conteneurs — puis le design réclame un héros avec un arrière-plan qui court d’un bord à l’autre de la fenêtre. La solution du débutant consiste à retirer le conteneur de cette section et à reconstruire son alignement interne à la main. Trois sections plus tard, la page a quatre idées différentes de l’endroit où se trouve son bord gauche.

Une section pleine largeur est une section dont l’arrière-plan échappe au conteneur pendant que son contenu y reste — et les implémentations propres partagent toutes cette séparation : la bande colorée, l’image ou la vidéo occupe toute la largeur de la fenêtre, mais le texte et les commandes posés dessus continuent de s’aligner sur la même grille que toutes les autres sections. La page garde une seule colonne vertébrale ; seule la peinture déborde. Cet article couvre les deux patterns modernes et le moment où chacun convient, un coin de notre guide de la grille de mise en page.

Pourquoi les arrière-plans débordent-ils mais pas le contenu ?

Parce que les deux remplissent des rôles différents. Un arrière-plan pleine largeur est de l’atmosphère — il signale un changement de section, porte une photo, donne à une bande de témoignage sa propre température. L’atmosphère gagne à être grande et ne perd rien à 2560px de large. Le contenu, lui, sert à lire et à agir — et tout ce que le conteneur protège (longueur de ligne, distance d’interaction, alignement avec les sections au-dessus et en dessous) s’applique toujours à l’intérieur de la bande. L’œil lit aussi l’alignement comme une structure : quand le titre du héros commence à la même position x que le texte de l’article en dessous, la page paraît d’un seul tenant. Une section pleine largeur dont le contenu déborde aussi brise cette colonne vertébrale — la mise en page se lit comme des affiches empilées plutôt que comme une page.

Pattern 1 : le conteneur imbriqué

La structure la plus simple — le wrapper de section est fluide, le conteneur se déplace à l’intérieur :

<section class="band">           <!-- fluide, porte l'arrière-plan -->
  <div class="grid-container">   <!-- le même conteneur que partout -->
    <h2>Edge-to-edge background, on-grid content</h2>
  </div>
</section>

.band {
  background: var(--color-surface-accent);
  /* pas de max-width — la bande est aussi large que la page */
}

Chaque section pleine largeur est un wrapper plus le conteneur standard — le même .grid-container (max-width, marges automatiques, padding-inline) que génère l’export CSS de grille de Scale Composer. Rien ne change dans le conteneur ; il se contente de se placer un niveau plus bas là où une bande a besoin de peinture derrière elle. La force de ce pattern, c’est sa bêtise : il fonctionne dans n’importe quel système de mise en page, ne demande aucune astuce de grille, et le balisage dit exactement ce qui se passe.

Pattern 2 : la grille breakout

Quand toute la page est une seule grille CSS, une structure à trois pistes permet aux sections de se désengager élément par élément plutôt que wrapper par wrapper :

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--grid-margin), 1fr)
    [content-start] min(var(--container), 100% - 2 * var(--grid-margin))
    [content-end] minmax(var(--grid-margin), 1fr)
    [full-end];
}
.page > * { grid-column: content; }   /* défaut : tout sur la grille     */
.page > .full-bleed { grid-column: full; }  /* désengagement : d'un bord à l'autre */

La piste centrale est le conteneur (plafonné à --container, jamais plus large que la fenêtre moins les marges) ; les pistes extérieures absorbent le reste comme le feraient autrement les marges automatiques. N’importe quel enfant réclame la pleine largeur avec une seule classe, et — c’est la partie élégante — un enfant pleine largeur peut lui-même être une grille dont la piste centrale se réaligne sur la colonne de contenu, si bien que le texte posé sur une bande débordante retombe sur la colonne vertébrale.

Choisissez selon la forme de la page : les pages majoritairement contenues avec une bande occasionnelle → le conteneur imbriqué (pattern 1) garde les choses évidentes ; les mises en page éditoriales où de nombreux éléments alternent entre les largeurs (images qui débordent, texte contenu) → la grille breakout (pattern 2) rentabilise son ingéniosité.

À quoi ressemblent les chiffres ?

Les design tokens qui pilotent les deux patterns viennent du système de grille : le plafond du conteneur et les marges par point de rupture. Avec les valeurs par défaut de Scale Composer — conteneur 1200px, marge desktop 66px — une fenêtre de 1440px donne à la bande 1440px de peinture pendant que son contenu s’étend sur les 1188px que la grille totalise réellement, avec (1440 − 1200) / 2 + le padding propre du conteneur comme retrait visuel. Réduisez au palier tablette et le token de marge tombe à 29px, la bande déborde toujours, et le bord du contenu suit la grille du palier.

Ouvrez le conteneur et ses marges dans la vue grille — le plafond de 1200px avec l’aperçu de 1440px autour : la zone entre le bord du conteneur et la fenêtre est exactement là où vit un arrière-plan pleine largeur.

Quels éléments méritent le débordement ?

Moins qu’il n’y en a qui l’obtiennent. Le débordement est de l’emphase, et l’emphase se dépense — la même logique de budget que toute autre monnaie d’attention dans un design system. Les bénéficiaires habituels : le héros (un par page), l’imagerie et la vidéo pleine largeur, les bandes de témoignage ou de CTA qui marquent les changements d’acte dans une page longue, les pieds de page. Les non-bénéficiaires habituels : le contenu principal (jamais), les cartes et les tableaux (ils se lisent moins bien en large), tout ce qui est en plein milieu d’un argument — un débordement interrompt, et interrompre le milieu d’un flux de lecture coûte plus que le drame ne rapporte.

Deux précautions mécaniques. Le débordement horizontal est le bug classique : un élément pleine largeur plus large que la fenêtre (une astuce de marge négative, un width: 100vw oublié qui ignore la barre de défilement) donne à toute la page un défilement latéral — préférez les patterns de grille ci-dessus, qui ne peuvent pas déborder par construction. Et la protection du texte : le contenu posé sur des débordements photographiques a toujours besoin de ses planchers de contraste ; un voile ou un bloc de contenu opaque sous le texte fait partie du pattern, pas d’un extra optionnel.

Lisez vos propres marges

La zone de débordement est une quantité dérivée — la fenêtre moins le conteneur, divisée en deux — et elle change à chaque point de rupture. Parcourez les paliers et observez les tokens de marge changer — 16px sur téléphone (où la pleine largeur se distingue à peine d’une section contenue), 29px sur tablette, 66px sur desktop où la bande a enfin la place de se lire comme une bande. Si votre design mise sur le spectacle de la pleine largeur, c’est le chiffre qui décide de la quantité de spectacle que chaque palier peut réellement offrir.