Fluides Grid – oder doch nicht?

Responsive Webdesign fordert per definitionem die Verwendung eines fluiden Grids als Layout-Basis. Grundsätzlich ist das absolut sinnvoll, passt sich ein fluides Design doch zumindest innerhalb bestimmter Dimensionen automagisch an die Bildschirmauflösung an – es muss lediglich an den sogenannten breaking points, an denen das Layout nicht mehr „passt“, angepasst werden.

Unabhängig von einem möglicherweise verwendeten Framework sind alle fluiden Grids gleich aufgebaut: Es gibt eine festgelegte Anzahl Spalten, welche durch Abstände, sogenannte Gutter, horizontal getrennt werden. Bei fluiden Grids werden sowohl die Breiten der Spalten als auch die der Gutter in Prozent angegeben.

Aber machen diese Eigenschaften eines fluiden (oder auch fixen) Grids in einer responsiven Umgebung überhaupt noch Sinn? 12 oder 16 Spalten auf kleinen Smartphones? Proportional zur Breite anwachsende Gutter, die zu einer Art „Zieharmonika-Effekt“ führen? Ausnutzung des zur Verfügung stehenden Platzes auf größeren Bildschirmen durch breitere statt durch mehr Spalten?

Eine mögliche Lösung

Das Golden Grid System von Joni Korpi zeigt einen möglichen Lösungsansatz: Ein „Falt-Grid“, dessen Spaltenanzahl sich an der zur Verfügung stehenden Breite des Bildschirms orientiert. Die 16 Spalten der großen Desktop-Bildschirme werden für Tablets auf 8 und für Smartphones auf 4 Spalten „zusammengeklappt“. Als „Abfallprodukt“ kommt das Golden Grid ohne „seltsame“ Spaltenbreiten wie z.B. 8.33333333 Prozent aus

Zudem wird das Gutter nicht über Außenabstände (margin), sondern Innenabstände (padding) der Grid-Boxen erzeugt – was die Schwäche dieses Ansatzes ist. Die dafür notwendige CSS-Eigenschaft box-sizing, welche das box model des betreffenden Elementes ändert, wird nur von neuesten Browsern unterstützt, speziell ältere Versionen des Internet Explorers scheitern also an dieser Technik.

Anders, komplizierter und einfacher

Nehmen wir nun an, man würde das Gutter nicht über die Innenabstände der Grid-Boxen, sondern die Außenabstände von deren Kindelementen erzeugen – also kein padding per box-sizing für einen Container, sondern horizontaler margin für die in diesem enthaltenen Elemente. Das funktioniert in allen Browsern problemlos und ist kein optischer, sondern lediglich ein technischer Unterschied.

Will man diese Abstände allerdings – wie das padding im Golden Grid – in em angeben, artet das ziemlich in (Rechen-)Arbeit aus. Solche Berechnungen lassen sich mit CSS-Präprozessoren wie LESS oder SASS recht bequem automatisieren, im gleichen „Rutsch“ kann man den Präprozessor auch über Mixins das Erzeugen der Grids für die verschiedenen Auflösungen erledigen lassen.

Unfug oder sinnvolle Anpassung fluider Grids an Responsive Webdesign?