Seit einer halben Ewigkeit befasse ich mich mit den Aspekten des Webdesigns. Wobei am Anfang ja alles ganz einfach war. Da gab es nur HTML, mit dem wir uns befassen mussten. Einfache Tags wie zum Beispiel <h1>Headline</h1> kapierten wir alle schnell und bastelten daraus unsere Webseiten. Das Layout war zwar zum Fürchten, aber wir waren ja alle total fasziniert über die Möglichkeiten, überhaupt was ins Netz stellen zu können. Die Wilden unter uns peppten die Webseiten mit animierten GIFs auf, sodass bald alles blinkte und sich bewegte. Damit alle diese animierten GIFs auch da platziert werden konnten, wo wir sie haben wollten, nutzten wir versteckte Tabellen. In diese Tabellen klebten wir die Bilder, die wir so an der gewünschten Stelle platzierten.
Plötzlich geisterte in der Szene herum, dass es nun Cascading Style Sheets (CSS) gibt und nun alles besser wird. Damit war es nun endlich möglich, den Content vom Design zu trennen. Aber dass hiess auch, dass ich von meinen lieb gewonnen Tabellen Abschied nehmen musste. Denn Tabellen sind Content und nicht Design. Mit den verrücktesten Tricks haben wir nun versucht, alles da zu platzieren, wo es hingehörte. Div Verschachtelung bis zum Abwinken war die Folge. Natürlich haben die Smartphones das nicht gerade einfacher gemacht. Denn natürlich muss alles responsiv und auf jedem noch so verrückten Bildschirm darstellbar sein. Eine Webseite zu bauen, die gut aussieht, sowohl auf einem Handy mit einer Bildschirmbreite vom 6 cm wie auch auf einem Datenmonitor mit einer Breite von 3 Metern, ist nicht ganz einfach. Dann gibt es da ja noch die Webapplikationen, bei denen Tausende Elemente genau am richtigen Ort sein müssen, damit das Interface funktioniert.
Viele trauerten den verlorenen Tabellen nach. Die Flexboxen sind zwar toll, doch einfach auch nicht immer das Gelbe vom Ei. Es gab diverse Ansätze meine geliebten Tabellen zurückzubringen. Da kam der sogenannten Grid Ansatz. An dem wird bereits seit 2012 herumgebastelt. Leider wurde aber kein Standard definiert, was den Einsatz auf den verschiedenen Plattformen eher zu einem Glücksspiel machte. Anfangs März stolperte ich über einen Blogartikel von Rachel Andrew „CSS Grid lands in Firefox 52“. Darin machte sie, ein riesen Tamtam um dieses Grid, das in der Firefox Version 52 integriert worden war. Ich dachte, dass nun Firefox auch wieder eine eigene Definition vom Grid erschaffen hatte. Als ich dann noch über den Artikel von Chris House „A Complete Guide to Grid“ gestolpert bin, wurde ich hellhörig. Es stellt sich heraus, dass am 9. Februar 2017 das W3C still und heimlich die „finale“ Version des CSS-Grids veröffentlicht hat. Zudem haben alle Browser die Definitionen bereits integriert. Na ja fast alle, denn in Microsoft Edge natürlich noch nicht. Da ist noch eine alte Version integriert. Aber das wird noch kommen. Microsoft braucht in allem etwas länger, aber machen es dann doch recht gut.
Aber wieder zurück zum CSS Grid. Ich habe mir das also ganz genau angeschaut. Jetzt verstehe ich die Aufregung von Rachel und wieso sie 5 Jahre mitgeholfen hat, daran zu bauen. Es ist wirklich sehr gut gelungen. Denn nicht nur, dass jetzt alles wieder sauber platziert werden kann, auch resposives Design ist damit möglich. Die Flexboxen, dynamischen Spalten das ganze Liquid Design macht mit CSS-Grid nun endlich wirklich Sinn und funktioniert.
Machen wir mal ein konkretes Beispiel. Folgender HTML Code nehme ich mal als Ausgangslage:
Hier haben wir definiert, dass das Grid drei Spalten haben wird.
Mit grid-teplate-columns: 200px 1fr 200px; definieren wir, dass die links Spalte 200 Pixel breit sein soll. Die mittlere Spalte soll sich an den Bildschirm anpassen. Die rechte Spalte hat ebenfalls eine Breite von 200 Pixel. Mit den Zeilen machen wir es uns einfach und definieren mit grid-auto-row: auto; dass so viel Zeilen erstellt werden sollen, wie wir Areas zuweisen.
Jetzt zur eigentlichen Magie. Im Befehl grid-template-areas: definieren wir, wo die einzelnen Bereiche auftauchen sollen.
«head head head»
«navi cont asid»
«foot foot foot»
„navi head head»
«navi cont asid»
«navi foot foot»
Damit können wir sehr schnell die Grundstruktur der Seite umstellen.
Mein gesamter Beispielcode sieht dann wie folgt aus. Ich habe den Code ganz einfach gehalten, damit du ihn einfach in eine HTML-Datei kopieren und damit herum experimentieren kannst.
Autor: Rico F. Lüthi
Bilder: Copyright by 123RF Stock Photo tycoon751, rclassenlayouts, Mats-Peter Forss