Das kann das neue Layout Modul
Soziale Netzwerke wie Facebook und Twitter haben es vorgemacht, Bloggingplattformen wie Tumblr und Blogger haben es adaptiert und mittlerweile scheint es die absolute Designlösung zu sein: das Grid Layout. Flexible Contentboxen ordnen sich scheinbar automatisch und ergeben so ein attraktives und aufgelockertes Design, das durch seine Spaltenstruktur dennoch eine gewisse optische Ordnung erzeugt. Eine variable Spaltenzahl macht das Grid Layout zu einem perfekt geeigneten Kandidaten, wenn es um die Erstellung repsonsiver Webseiten geht, die sowohl auf dem Desktop als auch im Handy elegant und modern aussehen und dem Benutzer eine konsistente Benutzung über alle Plattformen hinweg ermöglichen.
Die Begeisterung über das neue Modul versperrt aber allzu oft den Blick auf Designalternativen, die unter Umständen noch besser geeignet sind, um bestimmte Ergebnisse zu erzielen. Wir werfen einen kurzen Blick auf das neue CSS Layout Modul und testen seine Grenzen. Natürlich nicht, ohne Alternativen aufzuzeigen.
Was kann das neue Grid Modul?
Seit der Einführung von CSS in den 1990er Jahren experimentieren Webdesigner mit der flexiblen Anordnung der Elemente einer Webseite. Die Zeiten starrer Raster, Frames und Header sind zum Glück lange vorbei. Die ersten Gehversuche hin zu einem dynamischen Design unternahmen Entwickler mit dem in CSS definierten div-Modul, dass durch seine float-Parameter eine flexible Anordnung einzelner Elemente in Abhängigkeit voneinander und von vordefinierten Seitenrändern ermöglichte. Allerdings erlaubt die Floating-Technik nur eine Bewegung der Elemente in der Horizontalen. Bewegungen nach oben oder unten sind damit nicht möglich. Diese komplexen Konstruktionsmöglichkeiten ermöglicht erst eine Rasterung mithilfe des Grid Moduls.
Die Design-Eigenschaften "grid-template-columns" und "grid-template-rows" definieren dabei das Raster, in dem sich die einzelnen Elemente platzieren lassen. Wird nichts anderes definiert, so fügen sich die einzelnen Elemente automatisch in Leserichtung, also von links oben nach rechts unten in dieses Raster ein.
Was können andere Module besser?
Neben dem Grid-Modul existieren in CSS noch einige weitere Spezifikationen, mit denen sich flexible Layouts gestalten lassen. Das bereits erwähnte Div-Modul ermöglicht die links- oder rechtsbündige Orientierung einzelner Elemente. Wollen sie Text um ein Bild fließen lassen, setzen Sie dies ebenfalls schnell und einfach mittels der Floating Technik um.
Ein ebenfalls neu in CSS implementiertes Modul ist Flexbox. Im Gegensatz zum Grid Modul, mit dem sich komplexe Gitterstrukturen umsetzen lassen, ist Flexbox für die flexible Anordnung verschiedener Designelemente in horizontaler Ausrichtung gedacht. Dabei ist es durchaus möglich, für das globale Design ein Grid zu definieren und einzelne Elemente mithilfe des Flexbox-Moduls zu positionieren.
Überhaupt ist es das Zusammenspiel der verschiedenen CSS-Module, das die Erstellung dynamischer und flexibler Designs so überaus reizvoll macht.
