Im letzten Artikel der Serie verwies ich fast unbemerkt auf das Grid-Modul. Anders als die ersten beiden (Flexbox und Multi-Column) konzentriert sich dieses Modul verstärkt auf die Positionierung von Elementen innerhalb eines Spaltengefüges, anstatt sich “primär” selbst darum zu kümmern, dass ein solches entsteht. Primär nur, wohlgemerkt, denn es ist mit Grid-Layout durchaus möglich, Raster zu definieren.

Die Spezifikation zum Grid-Modul entspringt den Köpfen vieler Denker, darunter wieder Hakon Wium Liu, der sich schon für Multi-Column verantwortlich zeichnet. Als Hauptautoren werden aber Markus Mielke und Alex Mogilevsky von Microsoft genannt. Beide geben sich dort selbstverständlich dem hauseigenen Browser hin. Markus Mielke beispielsweise werkelte im Jahr 2000 an der DOM-Implementation des uns mittlerweile verhassten IE6. Damals war der Internet Explorer jedoch bei weitem der fortschrittlichste Browser auf dem Markt; dass er heute noch stellenweise Verwendung findet, kann man nicht den damaligen Entwicklern anlasten.

Bei einem etwas genauerem Blick auf die Spec fallen die vielen roten Stellen auf. In roter Schrift werden Verbesserungsvorschläge, Hinweise auf Lücken oder sonstige Anmerkungen markiert. Obwohl sich auch diese Spezifikation schon als „Working Draft“ gibt, sind einige solcher Bemerkungen zu finden.

Should there be an option to align flow content to next available gridline? It opens really cool scenarios.

Obwohl derartige Randnotizen sehr interessant und inspirierend sind, hindern sie die Suche nach Fakten und verwässern die Spezifikation ein wenig. Die wage Beschreibung vieler Funktionsweisen ist wahrscheinlich auch der Grund für die dürftige Browserunterstützung. Kein aktueller Browser unterstützt das Modul soweit, dass man es sinnvoll einsetzen könnte.

Darüberhinaus ist das gesamte Dokument das letzte mal im September 2007 aktualisiert worden. Da schwindet die Hoffnung auf Innovation ein wenig. Dennoch bedeutet das nicht, dass man das Thema „Positionierung im Spaltensatz“ einfach missachten könnte. In diesem Artikel soll es neben der Beschreibung der Grundfunktionen des Moduls deshalb auch um grundlegende Lehrweisen des Spaltensatz im Druck und die Übertragbarkeit auf das Web gehen.

Elemente im Raster

Um den Spaltensatz zu verstehen, muss man einen kleinen Ausflug ins Print-Design machen. Dort existiert der Spaltensatz schließlich schon seit Jahrhunderten und die Vor- und Nachteile haben sich seit damals kaum geändert.

Zunächst wird allgemein unterschieden zwischen dem Spaltensatz und dem Kolumnensatz. Das Resultat ist optisch ähnlich, aber auf der inhaltlichen Ebene findet man einen großen Unterschied. Kolumnen sind eigenständige Texte, die meist am rechten Rand als Zusatz zu einem größeren Hauptartikel erscheinen. Daher kommt auch der Name der Textsorte Kolumne. Die andere Gattung kennen wir schon von Multi-Column. Wenn ein zusammenhängender Text sich auf mehrere Spalten verteilt und von der einen in die jeweils benachbarte Zeile fließt, bezeichnet man das als den klassischen Spaltensatz. Erstere Form lässt sich am besten mit Flexbox (oder in der Übergangsphase noch mit floats) umsetzen, während bei der zweiten wie gesagt Multi-Column zum Einsatz kommt.

Der offensichtlichste Vorteil des Spaltensatzes ist die begrenzte Laufweite. Bekanntlich sollte die Laufweite – also die Breite eines Textblocks unter Beachtung der Schriftgröße – nicht zu groß sein. Bisher gab es für Webdesigner aber auch eine Minimalgrenze, denn ein zu schmaler Textblock geht gerne einmal im komplexen Seitengefüge unter und der Leser ist permanent damit beschäftigt, das Scrollrad rotieren zu lassen. Im Spaltensatz fallen diese Probleme weg. Man kann die Laufweite perfekt regeln ohne dass allzu großzügig mit vertikalem Raum umgegangen werden muss.

„Je schmaler, desto besser“ kann man dennoch nicht als Merksatz nehmen, denn insbesondere im Webdesign entstehen bei zu schmalen Spalten neue Probleme. Die fehlende Silbentrennung im Browser macht dabei am meisten zu schaffen. Ohne diese brechen Zeilen nur nach ganzen Wörtern oder hinter Satzzeichen um. Insbesondere im Deutschen hat das fatale Auswirkungen, denn kaum eine Sprache kennt längere Wörter als unsere. Ohne Silbentrennung klaffen riesige Lücken, was zum einen nicht gut aussieht und zum anderen das gewonnene Plus an Lesbarkeit wieder zunichte macht. Folgt man dann noch dem Vorbild der Zeitungen und Print-Magazine, gießt also den Text in Blocksatz, ist er aus, der Traum vom Spaltensatz.

Positionierung von Elementen im Spaltensatz: Der Grundgedanke

Ein Vorteil des Spaltensatzes, der gerne einmal übersehen wird, ist der der freien Positionierung von Elementen. Der normale Text hat seine vorgegebenen Bahnen, in denen er fließt, das ist klar. Aber alle Bilder, Zitatblöcke oder Zwischenüberschriften kann man frei auf der Seite positionieren. Um das zu veranschaulichen, hier zwei Beispielsituationenen:

Um den Text inhaltlich zu begleiten, wurden zwei kleine Grafiken gewählt. Die Grafiken beziehen sich auf den gesamten Text und sind nicht einem bestimmten Absatz zugewiesen. Wie man sieht, gibt es genau zwei Möglichkeiten, die Bildchen zu positionieren: Mit float: left am linken und mit float: right am rechten Rand.

Hier haben wir deutlich mehr Möglichkeiten, um die Bilder zu positionieren. Unabhängig von den Ausmaßen begleitender Bilder oder Zitate, findet man im Spaltensatz immer die richtige Positionierung. Wenn die Grafik beispielsweise ähnlich breit ist, wie eine Spalte, wählt man oft exakt die Position zwischen zwei Spalten. Derartige Freiheiten möchte im Webdesign nun auch das Grid-Positioning-Modul ermöglichen.

Eine neue Einheit: gr

Dazu werden drei grundlegende Neuigkeiten eingeführt: float-offset, float: column und die Einheit gr. Weist man der schon bekannten float-Eigenschaft den Wert column zu, richtet sich das entsprechende Element an dem Raster des Elternelements aus.

Für die genauere Positionierung in diesem Raster wird nun mit der Einheit gr und der Eigenschaft float-offset hantiert. Die neue Einheit steht dabei immer für den Abstand zwischen zwei Grid-Linien. Dieser hängt von vielerlei Umständen ab. So kann es sein, dass 1gr als 30px berechnet wird, aber an der gleichen Stelle 2gr zu 90px werden; ganz einfach deshalb, weil die erste Grid-Linie zur zweiten einen Abstand von nur 30px hat, während die zweite Grid-Linie zur dritten einen 60px-großen Abstand hat.

Man sieht her sehr schön, dass auch der Einsatz von beispielsweise column-gap eine weitere Grid-Linie erzeugt. Wie sich die Angaben auswirken, wenn man die tatsächlich zur Verfügung stehenden Grid-Abstände übersteigt (im obiger Situation zum Beispiel: width: 6gr), wird in der Spezifikation nirgends beschrieben.

Um das Beispiel in Abb. 2 mit dem Grid-Modul umzusetzen, könnte man folgendes CSS verwenden:

div {
    column-count: 3;
}

img.eins {
    float: column;
    width: 1gr;
    float-offset: 0.5gr;
}

Wir erzeugen ein implizites Grid mit drei Spalten. Das Bild richten wir an diesen Spalten aus, weisen ihm die Breite einer Spalte zu und verschieben es eine halbe Grid-Breite nach rechts.

Explizites Erzeugen eines Grids

Bisher haben wir uns immer in einem sog. impliziten Grid bewegt, also eines, das zum Beispiel durch Multi-Column oder auch Tabellen entsteht. Mit dem Grid-Modul ist es aber auch möglich, explizit ein Grid zu bestimmen.

Dazu gibt es zwei Eigenschaften: grid-columns und grid-rows. Mit beiden verfährt man exakt gleich, der einzige Unterschied besteht darin, dass grid-columns für die vertikalen Grid-Linien (und damit für die eigentlichen Spalten) verantwortlich ist und grid-rows für die horizontalen. Beiden weist man Werte mit kompliziert erscheinender Syntax zu. Mit etwas Übersicht, wird das System aber schnell begriffen.

Der Grundgedanke ist, dass man die Breiten der Spalten bzw. die Höhen der Zeilen nacheinander abarbeitet. Je nachdem wie viele Spalten oder Zeilen man haben möchte, kann man entsprechend beliebig viele Werte auflisten. Das einfachste Beispiel wäre folgendes:

grid-columns: 200px 400px 100px;

Es werden hierbei drei Spalten mit den Breiten 200px, 400px und 100px angelegt. Das Ganze unabhägig von der zur Verfügung stehenden Breite. Möchte man etwas flexibler sein, kann man das Asterisk-Zeichen (*) verwenden. Im Grunde handelt es sich auch hierbei um eine neue Maßeinheit. Dies wird am besten wieder in einem Beispiel sichtbar:

#outer {
    width: 700px;
}

#inner {
    grid-columns: 200px 1* 2* 200px;
}

Es stehen 700px an Breite zur Verfügung. Die statisch definierten Spalten 1 und 4 nehmen jeweils 200px ein. Die restlichen 300px verteilen sich nun anteilhaft auf die Spalten 2 und 3, und zwar bekommt die zweite Spalte ein Drittel (100px) und die dritte Spalte zwei Drittel (200px) ab. Wer diese Themenserie aufmerksam verfolgt hat, dürfte sich an das Prinzip von Flexbox erinnert fühlen.

Eine weitere Notation bietet ebenfalls Flexibilität. Klammert man einen oder mehrere Wertenotationen, so werden diese wiederholt, bis kein Platz mehr ist. So erzeugt man beispielsweise mit grid-columns: (100px) so viele 100px-breite Spalten, wie nebeneinander Raum finden. In geregelte Bahnen lenken kann man das nun wieder, indem man in eckigen Klammern dahinter schreibt, wie oft sich das Gefüge wiederholen soll.

grid-columns: 100px (42px 23px)[3] 100px;

Fazit

Man kann nur hoffen. Darauf, dass wenigstens der Kern dieser Spezifikation, das heißt die Positionierung von Elementen, irgendwann einmal in den Browsern implementiert sein wird. Es sieht düster aus, zumal die Spec eine der abenteuerlichsten ist, die ich jemals gesehen habe. Bei einer derartigen Grundlage kann man es den Browser-Ingenieuren nicht verübeln, dass sie sich nicht an die Aufgabe trauen.

Ob sich die Einheit gr auch auf Flexbox-Gebilde beziehen lässt, wird leider nirgends verraten. Sollte dies der Fall sein, ist die Erzeugung expliziter Grids mit diesem Modul ohnehin weitestgehend obsolet. Mit Flexbox, Multi-Column und dem Template-Modul, das im nächsten Artikel erklärt wird, hat man dann genug Handwerkszeug und ist gewappnet für die Zukunft.