Flexbox, Grid Layouts und ein neues Layout-System

Das könnte sich aber bald ändern, denn die bereits seit mehreren Jahren kontinuierlich weiterentwickelten Layout-Methoden CSS Grid Layout und Flexbox könnten schon im nächsten Jahr eine umfassendere Verbreitung und einen besseren Browser-Support erfahren. Zumindest hofft das Rachel Andrew, die in ihrem Artikel Grid, Flexbox, Box Alignment: Our New System for Layout einige der typischen Features des neuen CSS-Layout-Systems bestehend aus Grid-Layouts und Flexbox vorgestellt hat.

CSS Grid Layouts und Flexbox

Sowohl CSS Grid Layout als auch Flexbox spielen für das neue Layout-System eine wichtige Rolle – obwohl beide Methoden auf unterschiedliche Entwicklungsprozesse zurückblicken. Während Grid Layout im stillen Kämmerlein – also versteckt hinter den „experimentellen Feature-Flags“ in den verschiedenen Browsern – entwickelt und nicht produktiv genutzt wurde, fand Flexbox schon früh großen Anklang bei den Entwicklern. Die Folge der frühen Nutzung von Flexbox war jedoch, dass die Änderungen der Spezifikation zu verschiedenen Versionen der Spezifikation führten und auch die Browser-Implementierung beim Support der einzelnen Features eher lückenhaft war.

Flexbox und Grid Layout sind – entgegen der Meinung einiger Entwickler – allerdings keine konkurrierenden Layout-Systeme. Stattdessen, so erklärt Andrew, sollen beide Methoden die Basis für ein gemeinsames neues Layout-System bilden:

The reality, however, is that these two methods will sit together as one system for doing layout on the web, each method playing to certain strengths and serving particular layout tasks.

Dafür bringen beide Methoden einige Vorteile mit sich – allen voran, dass das Design damit nicht länger zwingend an das Markup gebunden ist.

Fluide Grid-Layouts mit CSS Grids und Flexbox

Ein großes Problem der existierenden Layout-Systeme ist die mangelnde Beziehung zwischen Elementen. Anders sieht es hier bei Flexbox oder Grid Layouts aus: einzelne Items werden erst dann zu Flex- oder Grid-Items, wenn sie ein direktes Child eines Element sind, auf das display:flex, display:grid oder display:inline-grid angewandt wird. So lassen sich zum Beispiel leicht Spalten in ganzer Höhe definieren – ein Vorgehen, das sich mit den bisherigen Methoden nicht umsetzen ließ.

Dazu erklärt Andrew:

Full-height columns rely on our flex and grid items understanding themselves as part of an overall layout.

Dafür machen sie sich auch eine weitere neue Spezifikation zunutze, nämlich das box-alignment-Modul. Genau das bringt eine wichtige neue Möglichkeit: die vertikale Zentrierung. Dabei ist der Default-Wert von align-items stretch, womit einzelne Spalten auf die Höhe der höchsten Spalten gebracht werden können; soll nur ein Flex- oder Grid-Item ausgerichtet werden, kann das align-self-Property angewandt werden.

Auch fluide Grids werden mit Flexbox und Grid Layouts vereinfacht. So kann das justify-content-Property genutzt werden, um einen gleichmäßigen Bereich um ein Item beziehungsweise zwischen zwei Items zu erzeugen; flex-grow und flex-shrink bieten Webdesignern die Möglichkeit, im Verhältnis zueinander passende Zwischenräume anzugeben. Ähnlich funktioniert auch die neue Fraction-Unit fr. Einige visuelle Beispiele dazu finden sich im oben genannten Artikel von Rachel Andrew.

Layout-Beschreibung direkt im CSS

Viele der aktuell beliebten Grid-Frameworks sind darauf angewiesen, dass das Layout direkt im Markup beschrieben wird – und das obwohl eigentlich eine Trennung zwischen Markup und Layout als das Argument für die Nutzung angesehen wurde. So ist es nur wenig verwunderlich, wenn auch heute noch mit tabellenartigen Layouts gearbeitet wird, die im Markup definiert werden.

Dabei ist das gar nicht nötig, denn Flexbox und Grid Layouts bieten einen entscheidenden Vorteil: sie müssen nicht im Markup beschrieben werden. Stattdessen geschieht die Layout-Beschreibung direkt im CSS, sodass Elemente problemlos innerhalb des Präsentation-Layers verschoben werden können.

Flexbox ermöglicht es dabei, den Flow verschiedener Elemente umzukehren, aber auch sie mit dem order-Property in einer bestimmten Reihenfolge anzuordnen – allerdings nur innerhalb einer Dimension. Mit Grid Layout können Elemente dagegen auch in zwei verschiedenen Dimensionen – Reihen und Spalten – positioniert werden. Der besondere Vorteil daran ist laut Andrew dabei vor allem, dass „positioning can be changed at any breakpoint without needing additional markup“.

Generell bringen Flexbox und Grid Layout aber auch viele weitere Möglichkeiten und Optionen für Webdesigner mit sich, die das bisherige Layout-System ersetzen – und vor allem verbessern – könnten. So ist es kein Wunder, dass Andrew sich für nächstes Jahr vor allem eines wünscht:

I really hope that in 2016, we will see CSS grid layout finally emerge from behind browser flags, so that we can start to use these features in production – that we can start to move away from using the wrong tools for the job.