Die Situation ist wohl jedem bekannt: Plötzlich merkt man, dass sich Abläufe wiederholen, eine gewisse Stagnation eintritt und man sich sogar mit diesem Umstand anfreunden kann. Man befindet sich in der Komfortzone, die den Berufsalltag ohne grosse Anstrengungen bewältigen lässt. Neue Herausforderungen werden auf später terminiert und mit bestehenden oder altbewährten Herangehensweisen gelöst. Wenn man diese Symptome erkennt, sollte man handeln und mit einer neuen Challenge beginnen!

Bei mir haben sich über die Jahre Tausende von Bookmarks angesammelt, die ich «irgendwann mal, wenn ich Zeit habe» anschauen und genauer studieren möchte. Aber sobald diese Zeit kommt, ist schon wieder etwas Anderes aktuell, das den Vorzug erhält.

Durch den Artikel «7 Design Challenges to Sharpen Your Skills» bin ich wieder daran erinnert worden, dass ich mich einmal wieder auf etwas Neues fokussieren sollte. Da ich in letzter Zeit etliche Bookmarks zum Thema «CSS Grids» gesammelt habe, war der Schritt naheliegend, endlich in diese neue (seit Mai 2017 eine «Candidate Recommendation») CSS-Spezifikation einzutauchen.

Mehrdimensional denken mit CSS Grids

Grids oder Satzspiegel – wie ich es noch aus meiner Lehre als Typograf gelernt habe – waren mit den bisherigen Methoden nur mühsam realisierbar und das responsive Verhalten jeweils sehr träge. Sei es nun durch den Einsatz von «Float», «Display: Inline-Block», «Table-Cell» oder auch durch die Einführung von «Flexbox», die mittlerweile als der Standard für Weblayouts gehandelt wird.

Jedoch kann man mit diesen Techniken nicht jedes Layout in verschiedenen Anordnungen darstellen, was bei umfangreichen responsiven Layouts jeweils erforderlich ist.

Large
  min-width: 60em
(4 Spalten)


+-----------+ +-----------+
|  wide 2   | |           |
|           | |           |
+-----------+ |   wide 2  |
+----+ +----+ |   tall 2  |
|    | |    | |           |
|    | |    | |           |
+----+ +----+ +-----------+
+----+ +----+ +----+ +----+
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+-----------+ +----+ +----+
|           | |    | |    |
|           | |    | |    |
|  wide 2   | +----+ +----+
|  tall 2   | +----+ +----+
|           | |    | |    |
|           | |    | |    |
+-----------+ +----+ +----+

|<----max-width: 60em---->|
Medium
  min-width: 30em
  and max-width: 60em
(3 Spalten)

+------------------+
|      wide 3      |
|                  |
+------------------+
+-----------+ +----+
|           | |    |
|           | |    |
|  wide 2   | +----+
|  tall 2   | +----+
|           | |    |
|           | |    |
+-----------+ +----+
+----+ +----+ +----+
|    | |    | |    |
|    | |    | |    |
+----+ +----+ +----+
+-----------+ +----+
|           | |    |
|           | |    |
|  wide 2   | +----+
|  tall 2   | +----+
|           | |    |
|           | |    |
+-----------+ +----+
+----+ +----+ +----+
|    | |    | |    |
|    | |    | |    |
+----+ +----+ +----+
Small
  min-width: 60em
(2 Spalten)


+-----------+
|  wide 2   |
|           |
+-----------+
+-----------+
|           |
|           |
|  wide 2   |
|  tall 2   |
|           |
|           |
+-----------+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+-----------+
|           |
|           |
|  wide 2   |
|  tall 2   |
|           |
|           |
+-----------+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+

Genau darin besteht der grösste Vorteil der neuen CSS-Spezifikation: Es ist nun möglich «mehrdimensional» zu denken und der Umgang mit Weissraum ist ebenfalls einfacher.

Nun, genug drum herum geredet, gehen wir in medias res. Das unten stehende Beispiel ist mit nur sieben Codezeilen und etwas CSS möglich und lässt einem die Freiheit, einen Bereich offen bzw. weiss stehen zu lassen.

See the Pen grid-test by Chris (@webdevil666) on CodePen.

Die wahre Stärke von «CSS Grid» zeigt sich in der Anordnung von responsiven Layouts, die eine Verschiebung der Design-Komponenten auf unterschiedlichen Viewports zulässt. Dabei kann mit «Grid-Template-Areas» auf intuitive Weise das Layout-Raster beschrieben werden, wobei die Bezeichnungen frei wählbar sind. Jede Zeichenkette bildet eine Zeile, die einzelnen Begriffe definieren die Rasterzellen.

See the Pen Grid Layout Example by Chris (@webdevil666) on CodePen.

Natürlich löst uns «CSS Grid» nicht jedes Problem, nach wie vor haben «Flexbox» und die «Display-Modes» ihre Berechtigung. Interessant wird's, wenn wir diese Techniken kombinieren: Anspruchsvolle Layouts realisiert man mit «CSS Grids», während wir für einzelne Komponenten, wie etwa Menü oder Galerien, auf «Flexbox» zurückgreifen können.

See the Pen Grid Test extended by Chris (@webdevil666) on CodePen.

Um das volle Vergnügen auszukosten, öffnen Sie das Beispiel in einem neuen Browserfenster und skalieren das Fenster.

Grids und Browser

Auch immer Thema ist die Frage, wie die Unterstützung für Internet Explorer aussieht: So wird die neue Version von «CSS Grid» gerade in Edge implementiert. Die Situation im Internet Explorer und in den bisherigen Edge-Versionen ist leider etwas heikler zu betrachten. Für IE10 muss man auf das -ms- Präfix ausweichen, wobei nicht alle Grid-Features, wie z.B. «Grid-Gap» oder auch «Grid-Template-Areas», funktionieren.

Die gute Nachricht: Mit den «modernen» Browsern wird man keine Probleme haben. Chrome unterstützt Grid standardmässig seit Version 57, Firefox seit 52, Safari mit 10.1, sowie auch iOS-Safari.

Diese beiden Beispiele sind wahrlich nichts Weltbewegendes, haben aber drei grossartige Nebeneffekte: 1. konnte ich darüber diesen Blogbeitrag schreiben, 2. konnte ich mein Know-how auch meinen Teammitgliedern weitergeben und 3. hat es in mir den Trieb geweckt, weiter mit der «CSS Grid-Technik» zu arbeiten. Die Recherchearbeit hat mich zudem auf interessante Seiten gebracht, die mir bei diesem Vorhaben behilflich sein werden…

… und zu diesem Video, das die gesamte Macht von «CSS Grids» zeigt.

Und wie steht's bei Ihnen? Fangen Sie jetzt an oder fragen Sie uns!

Wir freuen uns über Ihre Anfrage

Christian Schär

Christian Schär

ist der Dinosaurier im Team und setzt sein Wissen von Mockups bis zur Frontend-Entwicklung ein. Als gelernter Typograf sind seine Fachkenntnisse und Erfahrung bei anspruchsvollen Design-Umsetzungen sehr geschätzt.

cschaer@previon.ch

https://www.linkedin.com/in/cschaer/
https://www.xing.com/profiles/Christian_Schaer6
https://twitter.com/webdevil666