Vollbreite Sektionen in einem Container

Ein vertrautes Layout-Patt: Die Seite lebt in einem 1200px-Container — zu Recht, aus den Lesbarkeits-Gründen, aus denen Container überhaupt existieren — und dann verlangt das Design einen Hero mit einem Hintergrund, der von Rand zu Rand des Viewports läuft. Die Anfänger-Lösung: den Container aus dieser Sektion entfernen und ihre interne Ausrichtung von Hand nachbauen. Drei Sektionen später hat die Seite vier verschiedene Vorstellungen davon, wo ihre linke Kante liegt.

Eine vollbreite Sektion ist eine, deren Hintergrund aus dem Container ausbricht, während ihr Inhalt darin bleibt — und die sauberen Implementierungen teilen alle genau diese Trennung: das farbige Band, das Bild oder das Video läuft über die volle Viewport-Breite, aber der Text und die Bedienelemente darüber richten sich weiterhin am selben Raster aus wie jede andere Sektion. Die Seite behält ein Rückgrat; nur die Farbe läuft über. Dieser Artikel behandelt die zwei modernen Muster und wann welches passt — eine Ecke unseres Layout-Raster-Leitfadens.

Warum bricht der Hintergrund aus, der Inhalt aber nicht?

Weil die beiden unterschiedliche Aufgaben haben. Ein vollbreiter Hintergrund ist Atmosphäre — er signalisiert einen Sektionswechsel, trägt ein Foto, gibt einem Testimonial-Band seine eigene Temperatur. Atmosphäre gewinnt durch Größe und verliert nichts bei 2560px Breite. Inhalt ist Lesen und Handeln — und alles, was der Container schützt (Zeilenlänge, Interaktionsdistanz, Ausrichtung an den Sektionen darüber und darunter), gilt auch innerhalb des Bandes weiter. Das Auge liest Ausrichtung außerdem als Struktur: Wenn die Überschrift des Heros an derselben x-Position beginnt wie der Artikeltext darunter, fühlt sich die Seite wie eine Einheit an. Eine vollbreite Sektion, deren Inhalt ebenfalls ausbricht, bricht dieses Rückgrat — das Layout liest sich wie gestapelte Poster statt wie eine Seite.

Muster 1: der verschachtelte Container

Die einfachste Struktur — der Sektions-Wrapper ist fluid, der Container wandert nach innen:

<section class="band">           <!-- fluid, trägt den Hintergrund -->
  <div class="grid-container">   <!-- derselbe Container wie überall -->
    <h2>Edge-to-edge background, on-grid content</h2>
  </div>
</section>

.band {
  background: var(--color-surface-accent);
  /* keine max-width — das Band ist so breit wie die Seite */
}

Jede vollbreite Sektion ist ein Wrapper plus der Standard-Container — derselbe .grid-container (max-width, auto margins, padding-inline), den der Grid-CSS-Export von Scale Composer erzeugt. Am Container ändert sich nichts; er sitzt nur eine Ebene tiefer, wo ein Band Farbe hinter sich braucht. Die Stärke dieses Musters ist seine Schlichtheit: Es funktioniert in jedem Layout-System, braucht keine Raster-Tricks, und das Markup sagt genau, was passiert.

Muster 2: das Breakout-Raster

Wenn die ganze Seite ein einziges CSS-Grid ist, erlaubt eine Struktur aus drei Tracks, dass Sektionen pro Element statt pro Wrapper aussteigen:

.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; }   /* Standard: alles am Raster       */
.page > .full-bleed { grid-column: full; }  /* Ausstieg: von Rand zu Rand */

Der mittlere Track ist der Container (gedeckelt bei --container, nie breiter als der Viewport minus Ränder); die äußeren Tracks nehmen den Rest auf, wie es sonst auto margins tun würden. Jedes Kind beansprucht mit einer einzigen Klasse die volle Breite, und — das Elegante daran — ein vollbreites Kind kann selbst ein Grid sein, dessen mittlerer Track sich wieder an der Inhaltsspalte ausrichtet, sodass Text auf einem ausbrechenden Band zurück aufs Rückgrat fällt.

Wähl nach der Form der Seite: überwiegend eingefasste Seiten mit gelegentlichem Band → der verschachtelte Container (Muster 1) hält alles offensichtlich; redaktionelle Layouts, in denen viele Elemente zwischen Breiten wechseln (Bilder brechen aus, Text bleibt eingefasst) → rechtfertigt das Breakout-Raster (Muster 2) seine Cleverness.

Wie sehen die Zahlen aus?

Die Tokens, die beide Muster antreiben, kommen aus dem Raster-System: die Container-Obergrenze und die Ränder pro Breakpoint. Mit den Standardwerten von Scale Composer — Container 1200px, Desktop-Rand 66px — gibt ein 1440px-Viewport dem Band 1440px Farbe, während sein Inhalt die 1188px überspannt, die das Raster tatsächlich ergibt, mit (1440 − 1200) / 2 + dem eigenen padding des Containers als sichtbarem Einzug. Schrumpf auf die Tablet-Stufe, und das Rand-Token fällt auf 29px, das Band bricht weiterhin aus, und die Inhaltskante folgt dem Raster der Stufe.

Öffne den Container und seine Ränder in der Rasteransicht — die 1200px-Obergrenze mit der 1440px-Vorschau drumherum: Die Zone zwischen der Container-Kante und dem Viewport ist genau der Ort, an dem ein vollbreiter Hintergrund lebt.

Welche Elemente verdienen den Ausbruch?

Weniger als es bekommen. Der Ausbruch ist Betonung, und Betonung verbraucht sich selbst — dieselbe Budget-Logik wie bei jeder anderen Aufmerksamkeits-Währung in einem Design-System. Die üblichen Verdiener: der Hero (einer pro Seite), vollbreite Bilder und Videos, Testimonial- oder CTA-Bänder, die Akt-Wechsel auf einer langen Seite markieren, Footer. Die üblichen Nicht-Verdiener: Fließtext (nie), Cards und Tabellen (sie lesen sich breit schlechter), alles mitten im Argument — ein Ausbruch unterbricht, und die Mitte eines Leseflusses zu unterbrechen kostet mehr, als die Dramatik einbringt.

Zwei mechanische Warnungen. Horizontaler Überlauf ist der klassische Bug: ein vollbreites Element, das breiter ist als der Viewport (ein Negative-Margin-Hack, ein vergessenes width: 100vw, das die Scrollbar ignoriert), verpasst der ganzen Seite ein seitliches Scrollen — nimm lieber die Raster-Muster von oben, die konstruktionsbedingt nicht überlaufen können. Und Text-Schutz: Inhalt auf fotografischen Ausbrüchen braucht weiterhin seine Kontrast-Untergrenzen; ein Scrim oder eine deckende Inhaltsbox unter dem Text gehört zum Muster, nicht zur optionalen Zugabe.

Lies deine eigenen Ränder

Die Ausbruchszone ist eine abgeleitete Größe — Viewport minus Container, halbiert — und sie ändert sich bei jedem Breakpoint. Geh die Stufen durch und beobachte, wie sich die Rand-Tokens verändern — 16px auf dem Phone (wo vollbreit kaum von eingefasst zu unterscheiden ist), 29px auf dem Tablet, 66px auf dem Desktop, wo das Band endlich Raum hat, um als Band gelesen zu werden. Wenn dein Design auf Vollbreit-Dramatik setzt, ist das die Zahl, die entscheidet, wie viel Dramatik jede Stufe tatsächlich liefern kann.