Endlose Layouts

Layouts mit HTML und CSS zu erstellen war lange Zeit keine schöne Angelegenheit. Ohne die Features moderner CSS-Versionen basierten die Layouts von Websites lange auf Tabellen-Konstrukten mit dem table-Tag. Noch davor gab es den sogenannten Single Pixel GIF-Trick. Dabei wurde eine GIF-Datei mit einem transparenten Pixel erstellt und über die Höhe und Breite definiert, wie viel Platz dieser Pixel einnehmen sollte. Da das GIF transparent war, schien der Hintergrund durch. Dadurch ließen sich HTML-Elemente optisch voneinander trennen. Tabellenkonstruktionen funktionierten schon im Jahr 1990. Erst in HTML-only Seiten und dann mit Hilfe von CSS in der Version 1 in den späten 1990igern. Mit CSS 2, gab es anschließend das display-Tag und seit 2010 wird mit CSS 3 gearbeitet. Zum Beispiel mit Flexbox oder dem Grid-Layout. So weit ein kurzer und nicht ganz vollständiger Abriss der Historie zum Web-Layout.

Manchmal geht es aber gar nicht um das komplette Seitenlayout, sondern um einen einzelnen Inhaltsbereich. Zum Beispiel, um Daten in einem Grid-ähnlichen Layout anzuzeigen. Nicht immer muss das eine Tabelle sein. Sowohl vom ästhetischen als auch vom inhaltlichen Standpunkt aus, kann eine Tabelle nicht das richtige sein. Visuelle Elemente korrekt anzuordnen, fühlt sich in einer Tabelle nicht nur falsch an, sondern ist auch vom Usability-Standpunkt aus nicht zwingend eine gute Idee. Manchmal braucht es eine Grid-Anordnung, die mit dem gezeigten Content konform geht. Um eben zum Beispiel nicht gleich große Objekte anzuzeigen, ungleich verteilte Elemente zu erlauben oder eine wilde Mischung aus Objektgrößen, Elementinhalten und Anordnungen möglich zu machen. Das sind alles keine guten Anforderungen für Tabellen oder ähnliche Strukturierungs-Möglichkeiten. In diesem Artikel dreht sich alles um Grid-Layouts mit der Bibliothek Muuri. Sie verspricht einiges: Layouts die responsive sind, sich zudem sortieren und filtern lassen und darüber hinaus Drag & Drop für die Elemente bieten. Das sind eine ganze Menge an Features.