Eugen Zimmer - z-dezign
{ }

CSS Grid Layout ermöglicht ganz neue Gestaltungsmöglichkeiten

Kategorie(n): Webdesign

Endlich ein richtiges CSS-Layoutmodul für Webdesigner

Seit Kurzem wurde das neue CSS Grid Layout auf den Weg gebracht und ist in Firefox 52 verfügbar. Nach und nach soll der in allen Browsern implementiert werden, der nächste wird wahrscheinlich Google Chrome 57 sein. IE10, IE 11 und Edge unterstützen die Spezifikation nicht komplett, deswegen wird man noch für eine längere Zeit mit Progressive Enhancement und Tools wie Autoprefixer arbeiten müssen, wenn man CSS-Grids einsetzen möchte.

Beispiel für einen CSS Grid LayoutGrid Layout ermöglicht Webdesigner und Frontend-Entwicklern ganz neue Gestaltungsmöglichkeiten, die weit über die von Floats und auch der Flexbox hinausgehen, da Flexbox nur horizontale oder vertikale Anordnungen per CSS möglich macht. Mit Grid Layout können gleichzeitig horizontale und vertikale Anordnungen und damit wesentlich komplexere Layouts umgesetzt werden, so werden gleichhohe Spaltenanordnungen oder ein Sticky Footer zum Kinderspiel.

Die ideale Reihenfolge der Elemente ist die, die auf dem kleinsten Monitor angezeigt werden soll. Auf großen Monitoren wollen wir dann die Elemente beliebig platzieren. Keine der klassischen Methoden der Positionierung – gleich ob table, float oder display: flex – konnte diese Anforderung ohne Weiteres erfüllen. Das Gute ist, die Platzierung der Elemente im Grid hat keinen Einfluss auf die Reihenfolge bei der Sprachausgabe oder Navigation mit der Tastatur, sondern trennt Inhalt und Layout ohne großen Aufwand.

Ich denke, dass Grid Layout wird sich bald durchsetzen und als Frontend-Entwickler/Webdesigner sollte man anfangen sich damit zu beschäftigen, um die praktische Erfahrungen zu sammeln. Viel Spaß!

Anbei sind ein paar Leseempfehlungen zum Thema CSS Grid Layout: