Quelle: Shutterstock / master_art
Grid-Layouts mit der Bibliothek Muuri 13.04.2021, 11:14 Uhr

Endlose Layouts

Die Bibliothek Muuri unterstützt Designer beim Anordnen von Elementen auf Websites.
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.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar