Ein Spaltenraster teilt eine Seite in senkrechte Spalten mit festen Zwischenräumen. Inhalte werden an diesen Spalten ausgerichtet und nehmen eine oder mehrere davon ein. Laut Nielsen Norman Group besteht ein Raster aus Spalten, Zwischenräumen, englisch gutters, und Rändern.
- Spaltenraster
Ein Gestaltungsraster aus senkrechten Spalten mit festen Zwischenräumen, an dem Inhalte ausgerichtet werden.
Beispiel: „Im Spaltenraster mit zwölf Spalten nimmt der Text acht ein, die Seitenleiste vier.“Auch: Kolumnenraster, englisch column grid.
Abgrenzung zum modularen Raster: Es teilt die Spalten zusätzlich in Zeilen.
Aufbau eines Spaltenrasters
Spaltenbreiten werden laut Nielsen Norman Group meist in Prozent angegeben, die Zwischenräume als feste Werte je Breakpoint. Die Ränder links und rechts bleiben frei. Das Typolexikon nennt den Zwischenraum Spaltenabstand oder Zwischenschlag, das Raster selbst Kolumnen- oder Spaltenraster.
Warum zwölf Spalten im Spaltenraster
Zwölf lässt sich durch zwei, drei, vier und sechs teilen; so passen halbe, drittel und viertel Breiten ohne Rest hinein. Die Nielsen Norman Group empfiehlt zwölf Spalten für Laptop und Desktop. Bootstrap nutzt sie seit Version 2; die erste Version hatte noch 16.
Spaltenraster für verschiedene Bildschirme
Ein Raster wechselt mit der Breite. Material Design sah in seiner zweiten Fassung vier Spalten unter 600 dp vor, acht bis 839 dp und zwölf darüber, mit Rändern und Stegen von 16 oder 24 dp. In CSS lässt sich ein Spaltenraster direkt mit Grid bauen.
.raster {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (min-width: 840px) {
.raster { grid-template-columns: repeat(12, 1fr); gap: 24px; }
}