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.