Was ist ein Fluid Grid?

Ein Fluid Grid ist ein Rastersystem für Website-Layouts, das relative Breiten statt fixer Pixelwerte verwendet. Die Spaltenbreiten werden in Prozent angegeben, sodass das Layout automatisch skaliert und sich an die jeweilige Bildschirmbreite anpasst.

Das Gegenteil wäre ein Fixed Layout: eine Website mit einer festen Breite von 1200 Pixeln. Auf einem kleineren Bildschirm erscheint sie dann zu breit, und der Nutzer muss horizontal scrollen. Ein Fluid Grid verhindert das, weil alle Spalten prozentual sind: eine Spalte mit 33 Prozent ist auf einem 1440px-Monitor 480px breit, auf einem 768px-Tablet 256px.

Fluid Grid als Basis von Responsive Design

Fluid Grid ist einer der drei Grundpfeiler von Responsive Design, ein Begriff, den Ethan Marcotte 2010 geprägt hat. Die anderen beiden sind flexible Bilder (die maximal so breit werden wie ihr Container) und CSS Media Queries (die Layouts bei bestimmten Breakpoints ändern).

In der modernen CSS-Entwicklung wird Fluid Grid oft mit CSS Grid oder Flexbox umgesetzt. CSS Grid ist ein zweidimensionales Layoutsystem, das Spalten und Zeilen gleichzeitig definiert. Flexbox ist eindimensional und besonders gut für die Ausrichtung von Elementen in einer Reihe oder Spalte.

Ein typisches Fluid Grid hat zwölf Spalten, eine Konvention, die von Bootstrap popularisiert wurde. Ein Element kann zwischen einer und zwölf Spalten breit sein. Ein Element mit sechs Spalten nimmt die Hälfte der Breite ein. Zwei nebeneinanderliegende Elemente mit je sechs Spalten füllen die volle Breite. Das gibt Designern und Entwicklern ein flexibles Werkzeug für verschiedenste Layouts.

Das Konzept des Fluid Typography geht einen Schritt weiter und überträgt das Prinzip auf Schriftgrößen. Statt fester Pixelwerte für Schriftgrößen werden fluid Formeln verwendet, die Schriften je nach Bildschirmbreite skalieren. Das ist mit CSS clamp() möglich und reduziert die Anzahl der benötigten Breakpoints für Typografie erheblich.

Fluid Grids sind so verbreitet, dass man sie heute kaum noch explizit erwähnt. Sie sind der Standard in professioneller Webentwicklung. Was sich ändert, sind die Tools und Techniken. Wenn du mehr über moderne Layout-Techniken für dein Webprojekt erfahren möchtest, hilft ein kostenloses Gespräch weiter. Unsere Webentwicklungsleistungen basieren durchgängig auf modernen CSS-Standards.