Grid Calculator

Häufig gestellte Fragen

Was ist ein Gestaltungsraster im Webdesign?
Ein Gestaltungsraster teilt die verfügbare Breite in gleichmäßige Spalten mit festen Zwischenräumen. Es dient als unsichtbares Gerüst, an dem sich alle Elemente einer Website ausrichten. Das Ergebnis sind Layouts, die geordnet wirken und sich über alle Seiten hinweg konsistent anfühlen.

Wie viele Spalten sollte mein Raster haben?
Zwölf Spalten sind der bewährte Standard für Desktop-Layouts. Die Zahl lässt sich durch 2, 3, 4 und 6 teilen und erlaubt damit fast jede Aufteilung, von der Halbierung bis zum Dreispalter. Für Tablets sind 8 Spalten üblich, für Smartphones genügen 4.

Was ist ein Gutter?
Der Gutter ist der Abstand zwischen zwei benachbarten Spalten. Er sorgt dafür, dass Inhalte nicht aneinanderkleben und das Layout atmen kann. Übliche Werte liegen zwischen 16 und 32 Pixeln. Je größer die Schrift und je großzügiger das Design, desto breiter darf der Gutter sein.

Sollte ich CSS Grid oder Flexbox verwenden?
CSS Grid ist die erste Wahl für Seitenlayouts, weil es Zeilen und Spalten gleichzeitig kontrolliert. Flexbox spielt seine Stärken aus, wenn Elemente in einer Reihe angeordnet und flexibel verteilt werden sollen, etwa in Navigationen oder Kartenreihen. In der Praxis ergänzen sich beide. Der Calculator liefert dir den Code für beide Varianten.

Warum sollte die Spaltenbreite ganzzahlig sein?
Halbe Pixel kann kein Bildschirm darstellen. Browser runden solche Werte, wodurch Spalten minimal unterschiedlich breit geraten können. Für die Umsetzung mit modernen fr-Einheiten ist das unkritisch, in Design-Tools wie Figma arbeitest du mit ganzen Zahlen aber deutlich entspannter. Der Tipp im Tool führt dich mit einem Klick zur passenden Gesamtbreite.