Ein Grid-System ist ein unsichtbares Raster aus Spalten und Abständen, an dem die Elemente einer Seite ausgerichtet werden. Es sorgt dafür, dass Inhalte über alle Seiten hinweg an denselben Kanten stehen, und macht Entscheidungen über Breiten und Abstände wiederholbar.
- Grid-System im Webdesign
Ein Raster aus Spalten, Zwischenräumen und Rändern, an dem Inhalte ausgerichtet werden, um über eine ganze Website hinweg dieselbe Ordnung zu erzeugen.
Beispiel: „Der Teaser läuft über vier Spalten, das Bild daneben über acht.“Bestandteile: Spalten (columns), die Zwischenräume dazwischen (gutter) und der Außenrand (margin). Verbreitet sind zwölf Spalten, weil sich diese Zahl in Hälften, Drittel und Viertel teilen lässt.
Abgrenzung zu CSS Grid: Das ist die Technik, mit der sich ein Raster im Browser umsetzen lässt. Das Grid-System ist die gestalterische Festlegung dahinter.
Was ein Raster bewirkt
Der sichtbare Effekt ist Ruhe. Wenn Überschriften, Bilder und Textblöcke auf denselben Linien beginnen, wirkt eine Seite geordnet, ohne dass jemand sagen könnte woran es liegt. Umgekehrt fällt eine Abweichung von wenigen Pixeln auf, auch wenn sie sich nicht benennen lässt.
Der praktische Effekt ist Geschwindigkeit. Die Frage, wie breit ein Element sein soll, beantwortet ein Raster mit einer Auswahl aus wenigen Möglichkeiten. Das beschleunigt den Entwurf und macht die Umsetzung eindeutig, weil zwischen Design und Entwicklung dieselben Spaltenzahlen benutzt werden.
Wie es sich an Bildschirmgrößen anpasst
Ein Raster ist keine feste Pixelangabe. Üblich sind mitwachsende Spalten mit festen Zwischenräumen, sodass sich die Breite dem Fenster anpasst, die Abstände aber gleich bleiben. Auf kleinen Bildschirmen sinkt die Spaltenzahl, aus zwölf werden acht oder vier, und Elemente rutschen untereinander.
Dazu kommt eine Maximalbreite. Ohne sie zieht sich ein Textblock auf einem großen Monitor über die volle Breite, und die Zeilen werden zu lang zum Lesen. Als Richtwert gelten 60 bis 80 Zeichen je Zeile, woraus sich die Begrenzung des Textbereichs ergibt.
Wann davon abgewichen wird
Ein Raster ist eine Hilfe und keine Vorschrift. Ganzflächige Bilder, Hintergründe und einzelne betonte Elemente dürfen darüber hinauslaufen, gerade weil der Bruch dann wirkt. Entscheidend ist, dass die Abweichung eine Absicht hat und der Rest der Seite die Ordnung hält.