Ein Fluid Grid Layout ist ein Spaltenraster, dessen Spaltenbreiten und Zwischenräume in relativen Einheiten angegeben sind und das deshalb mit der Fensterbreite mitwächst. Die Zahl der Spalten bleibt gleich, die einzelne Spalte wird breiter oder schmaler. Ein festes Raster gibt seine Spalten dagegen in Pixeln an und braucht für jede Bildschirmgröße eine eigene Fassung. Ethan Marcotte hat die Rechenlogik dahinter 2009 im Artikel „Fluid Grids“ beschrieben, und sie steckt bis heute in praktisch jedem Layout-Framework.
- Fluid Grid Layout
Spaltenraster, dessen Spaltenbreiten und Zwischenräume in relativen Einheiten angegeben sind und deshalb mit dem Fenster mitwachsen.
Beispiel: „Der Teaserblock liegt über vier von zwölf Spalten und behält dieses Verhältnis auf jeder Breite.“Abgrenzung zum Grid-System: Das Grid-System ist die gestalterische Festlegung, wie viele Spalten es gibt und woran sich Inhalte ausrichten. Fluid Grid Layout beschreibt die Einheiten, in denen dieses Raster umgesetzt wird.
Abgrenzung zum Fluid Layout: Fluid Layout meint das allgemeine Prinzip relativer Breiten für beliebige Elemente. Beim Fluid Grid Layout folgen diese Breiten zusätzlich einem festen Spaltenraster.
Aus Pixelbreiten werden Prozentwerte
Der klassische Weg führt über eine Division. Die Regel lautet „target ÷ context = result“: Ein Element von 300 Pixeln in einem 960 Pixel breiten Entwurf bekommt 31,25 Prozent. Dieselbe Rechnung gilt für die Zwischenräume, weshalb in frühen Fluid Grids erstaunlich viele Nachkommastellen im Stylesheet standen.
Entscheidend ist der Bezugspunkt. Prozentangaben gelten immer gegenüber dem Elternelement, sodass ein Raster innerhalb eines Rasters neu gerechnet werden muss.
Was CSS Grid daran geändert hat
Seit CSS Grid und Flexbox übernimmt der Browser die Rechnerei. Die Einheit fr verteilt den verbleibenden Platz nach Anteilen, gap setzt die Zwischenräume unabhängig davon, und minmax() legt für jede Spalte eine Unter- und eine Obergrenze fest. Damit lässt sich ein Raster beschreiben, das seine Spalten erst dann umbricht, wenn sie eine Mindestbreite unterschreiten, ganz ohne Media Query.
Der praktische Gewinn liegt in den Zwischenräumen. Früher musste jeder Abstand aus der Gesamtbreite herausgerechnet werden, und jede Änderung an der Spaltenzahl zog eine neue Rechnung nach sich. Heute bleibt der Abstand eine feste Angabe, und nur die Spalten fließen.
Wo das mitwachsende Raster aufhört zu helfen
Ein Raster, das ausschließlich mitwächst, liefert an den Rändern unbrauchbare Ergebnisse. Zwölf Spalten auf einem Telefon ergeben Spaltenbreiten von wenigen Millimetern, in denen kein Inhalt mehr Platz findet. Deshalb wird das fließende Verhalten an Breakpoints ergänzt, an denen die Spaltenzahl selbst sinkt.
Bewährt hat sich, die Zahl dieser Rasterfassungen klein zu halten. Zwei oder drei Stufen reichen in aller Regel, alles dazwischen erledigt das Mitwachsen. Jede weitere Fassung ist ein zusätzlicher Zustand, der bei jeder Layoutänderung mitgeprüft werden muss.