Spaltenspannen und Verschachtelung

In einem CSS Raster beansprucht ein Element seine Breite als Spanne: grid-column: span 4 — oder eine .col-4-Utility-Klasse — nimmt vier Spalten der aktuellen Stufe ein, inklusive der internen Stege. Eine Seite auf einem Raster zu bauen ist die Arithmetik der Spannen (Abschnitte teilen zwölf Desktop-Spalten in Muster wie 8 + 4 oder 4 + 4 + 4) plus das Urteil hinter der Arithmetik: zuerst die Inhaltsbreite, dann die Hierarchie, zuletzt die Ausrichtung.

Das Raster definiert die Spalten; die Spannen entscheiden, was auf ihnen sitzt. Dieser Artikel behandelt die Span-Grammatik, die Handvoll Muster, aus denen die meisten Seiten gebaut sind, die drei Entscheidungen hinter einer Spanne, was ein verschachteltes Raster erbt und was nicht, und was mit Spannen auf einem Telefon passiert — die Kompositions-Ebene des layout grid.

Was macht grid-column: span N eigentlich?

Die grid-column-Eigenschaft platziert ein Element auf den Spaltenlinien des Rasters, und das Schlüsselwort span ist ihre relative Form: belege N Tracks ab dort, wo das Element landet. Eine Spanne ist ein Breiten-Anspruch in Spalten-Einheiten, nicht in Pixeln — ein Span-4-Element ist vier Spalten plus die drei Stege dazwischen breit.

Mit gängigen Desktop-Zahlen (1200px-Container, 66px-Ränder, 24px-Stege, zwölf Spalten zu je 67px) ergibt Span 4 gerade 4 × 67 + 3 × 24 = 340px und Span 8 ergibt 704px. Derselbe Anspruch erzeugt auf anderen Stufen unterschiedliche echte Breiten — und genau das macht Spannen portabel, wo Pixel-Breiten es nicht sind.

Welche Span-Muster decken die meisten Seiten ab?

Ein kurzes Vokabular wiederholt sich über die meisten Zwölf-Spalten-Layouts hinweg:

Diese Muster wiederholen sich, weil 12 viele Teiler hat — Hälften, Drittel und Viertel landen alle auf ganzen Spalten, und die asymmetrischen Paare (5 + 7, 8 + 4) summieren sich trotzdem sauber.

Wie wählst du eine Spanne?

Zuerst die Inhaltsbreite. Geh davon aus, was der Inhalt braucht, und rechne dann um. Eine Seitenleiste ist um die 300px herum angenehm: bei den Desktop-Zahlen oben gibt Span 4 340px — Raum zum Atmen — während Span 3 nur 249px gibt, knapp für alles jenseits von Links. Eine Zeile Fließtext liest sich am besten irgendwo bei 45–75 Zeichen, was bei 16px im Bereich von Span 7 bis 8 landet. Die Spanne ist die Umrechnung einer Inhalts-Anforderung in Spalten-Einheiten, keine Zahl, die um ihrer eigenen Eleganz willen gewählt wird.

Dann die Hierarchie. Breite wird als Wichtigkeit gelesen: in einem 8 + 4-Layout verwechseln nur wenige Leser die Seitenleiste mit dem Hauptgeschehen. Wenn zwei Bereiche gleich wichtig sind, sagt 6 + 6 genau das; wenn nicht, dann fehlinformiert es leise, ihnen gleiche Breite zu geben.

Zuletzt die Ausrichtung. Spannen, die sich Rasterlinien teilen, erzeugen die vertikalen Kanten, die eine Seite strukturiert wirken lassen. Im Stapel aus 8 + 4 über 4 + 4 + 4 landet die Grenze zwischen Artikel und Seitenleiste auf derselben Linie wie die linke Kante der dritten Karte — eine durchgehende Kante über die ganze Seite. Das intuitive Warum: Das Auge liest geteilte Kanten als beabsichtigte Struktur und liest Beinahe-Treffer als Schlamperei — eine Kante, die fast fluchtet, stört oft mehr als eine, die es klar nicht tut, weil sie wie ein gescheiterter Versuch der ersten aussieht.

Sieh dir diese Muster live auf dem Standard-Raster in Scale Composer an — die Reihen 8 + 4, 6 + 6 und 4 + 4 + 4 auf der Zwölf-Spalten-Desktop-Stufe, mit den geteilten Kanten, die dort sichtbar sind, wo sich die Muster stapeln.

Erbt ein verschachteltes Raster das Seitenraster?

Nein — und genau zu wissen, was übernommen wird, verhindert die üblichen Überraschungen. Jedes gespannte Element kann display: grid deklarieren und sein eigenes Raster beherbergen, aber die Tracks des inneren Rasters sind ganz seine eigenen: es erbt keine Spaltenanzahl, keine Linienpositionen, nichts Geometrisches. Custom Properties werden dagegen vererbt, also greift ein inneres gap: var(--grid-gutter) den Steg der Stufe auf — die Zahlen fließen nach unten; die Tracks nicht. Eine Konsequenz, die man kennen sollte: eine gleiche Teilung einer geraden Spanne, mit demselben Steg, landet wieder auf den Spaltenlinien der Seite (die Hälfte eines Span-8-Artikels ist genau eine Span-4-Breite), aber die meisten anderen inneren Teilungen driften ganz vom Seitenraster ab.

Die nützlichere Frage ist, ob das Seitenraster überhaupt in eine Komponente gehört. Meist nicht: Die Aufgabe des Seitenrasters ist es, Komponenten zu positionieren, und das Innere einer Komponente wird von ihrer eigenen Padding- und Gap-Logik bestimmt. Eine Karte muss nicht wissen, dass sie auf einer Zwölf-Spalten-Seite sitzt; sie braucht konsistente interne Abstände, wo immer sie abgelegt wird. Diese Grenze zu wahren ist es, was Komponenten ohne Neuverhandlung zwischen Layouts wandern lässt.

Die echte Ausnahme ist die Ausrichtung über Geschwister hinweg: die Titel, Preise und Buttons von drei benachbarten Karten auf geteilten Zeilen sitzen zu lassen, unabhängig von der Inhaltslänge. Genau dafür ist subgrid da — ein verschachteltes Raster, das die Tracks seines Elternteils übernimmt, statt eigene zu definieren. Es ist das neuere Werkzeug dieses Artikels, mit breiter, aber relativ junger Browser-Unterstützung, also prüfe deine Support-Untergrenze, bevor du dich darauf verlässt.

Was passiert mit Spannen auf einem Telefon?

Spannen sind Entscheidungen pro Stufe, und es gibt zwei Wege, sie zu treffen.

Der Standard ist die Begrenzung (in die Span-Klassen des Rasters eingebaut): grid-column: span min(N, var(--grid-cols)) deckelt jeden Anspruch bei der Spaltenzahl der Stufe, sodass aus einem Desktop-8 + 4 auf einem Vier-Spalten-Telefon zwei Reihen voller Breite werden — ein sauberer Stapel, nirgends geschrieben. Die Begrenzung ist richtig, wann immer „alles volle Breite“ die korrekte Antwort für kleine Bildschirme ist, was sie bei textgeführten Seiten meist ist.

Explizites Neu-Spannen übernimmt, wenn der Umbruch Art Direction braucht. Ein 6 + 6-Paar auf einem Acht-Spalten-Tablet wird auf 6 + 6 begrenzt — aber 6 + 6 > 8, also brechen die beiden Elemente auf getrennte Reihen um, je sechs von acht Spalten breit: ausgefranst, nicht gestapelt. Eine einzige Media Query, die sie auf Span 4 + 4 (nebeneinander) oder 8 + 8 (Stapel voller Breite) neu deklariert, benennt die Absicht. Begrenzen ist Graceful Degradation; Neu-Spannen ist Gestaltung.

Wie verhält sich eine Karten-Reihe vom Desktop zum Telefon?

Verfolge drei .col-4-Karten durch die Standard-Stufen:

Desktop und Telefon kommen genau wie beabsichtigt heraus, gratis. Die Tablet-Reihe ist der ehrliche Fall: Die Begrenzung garantiert, dass nichts überläuft, aber drei Span-4-Karten auf acht Spalten brechen 2 + 1 um und lassen eine Waise zurück. Wenn das die Gestaltung stört, ist es eine einzige explizite Regel auf dieser Stufe — gib der dritten Karte span 8 als Abschluss voller Breite, oder setze alle drei auf volle Breite — so oder so ist die Ausnahme eine Zeile, kein System.

Sieh die Begrenzung in Aktion

Der Begrenzung ist leichter zu trauen, wenn du sie einmal in Aktion gesehen hast. Lade das 8 + 4-Muster und schalte die Vorschau von Desktop zu Tablet zu Telefon: die Spannen halten bei zwölf und acht Spalten, dann klappen sie bei vier auf volle Breite — sieh zu, wie die Desktop-Spannen in Scale Composer zu einem Telefon-Stapel herunterbegrenzt werden.