Ein Fluid Layout ist ein Seitenlayout, dessen Breiten in relativen Einheiten angegeben sind und das sich dadurch stufenlos an die Breite des Browserfensters anpasst. Eine Spalte belegt dann 60 Prozent des verfügbaren Platzes, während ein festes Layout ihr 720 Pixel zuweist und diese Breite bei jeder Fenstergröße behält. Fluid heißt, dass das Layout bei jedem Zwischenwert mitgeht, auch zwischen zwei Breakpoints. Es ist neben Media Queries und flexiblen Bildern einer der Bausteine, aus denen Ethan Marcotte 2010 den Begriff Responsive Design zusammengesetzt hat.
- Fluid Layout
Layout, dessen Breiten in relativen Einheiten angegeben sind und das sich dadurch stufenlos an das Browserfenster anpasst.
Beispiel: „Die Textspalte ist als Fluid Layout gebaut und läuft zwischen 320 und 1200 Pixeln ohne einen einzigen Sprung.“Auch: flexibles Layout oder fließendes Layout. Die deutschen Formen stammen aus älterer Fachliteratur, im Projektalltag ist Fluid Layout gebräuchlicher.
Gegenbegriff: Das fixe Layout legt Breiten in Pixeln fest. Es bleibt auf jedem Bildschirm gleich breit und lässt daneben leeren Raum stehen.
Eine Breite entsteht aus dem Verhältnis zum Elternelement
Die Grundlage ist eine Division. Marcotte hat sie als Regel „target ÷ context = result“ beschrieben: Ein Element von 720 Pixeln in einem 960 Pixel breiten Entwurf bekommt 75 Prozent. Ob das Fenster später 1024 oder 1600 Pixel misst, ändert nur die absolute Zahl, das Verhältnis bleibt.
Heute nimmt CSS dir diese Rechnerei ab. Flexbox verteilt den vorhandenen Platz nach Anteilen, und clamp() verbindet Mindestwert, mitwachsenden Wert und Höchstwert in einer einzigen Angabe.
Stufenlos ist noch nicht automatisch lesbar
Ein Layout, das ungebremst mitwächst, produziert an beiden Enden Probleme. Auf einem 27-Zoll-Monitor erreicht eine mitwachsende Textspalte Zeilenlängen, bei denen das Auge nach dem Zeilenwechsel den Anfang nicht mehr findet. Als Richtwert gelten 60 bis 80 Zeichen je Zeile, und daraus ergibt sich eine Maximalbreite für den Textbereich.
In der Gegenrichtung passiert dasselbe: Unterhalb von etwa 320 Pixeln werden aus prozentualen Spalten Streifen, in denen kaum zwei Wörter nebeneinander stehen. Wir setzen deshalb min-width und max-width als Leitplanken und lassen die Breite nur dazwischen fließen.
Das Verhältnis zu Breakpoints und zum Fluid Grid Layout
Fluid Layout und Breakpoints lösen unterschiedliche Aufgaben und werden meist zusammen eingesetzt. Die relative Breite deckt ab, was zwischen zwei Umbrüchen passiert. Der Breakpoint greift dort ein, wo sich die Anordnung selbst ändert, etwa wenn aus drei Teasern nebeneinander eine Reihe untereinander wird.
Die Grenze zum Fluid Grid Layout verläuft an der Frage, ob ein Raster im Spiel ist. Fluid Layout beschreibt das allgemeine Prinzip relativer Breiten für beliebige Elemente. Fluid Grid Layout beschreibt den Sonderfall, dass diese Breiten einem festen Spaltenraster folgen, dessen Spalten und Zwischenräume gemeinsam mitwachsen.