Ein modulares Raster teilt eine Fläche in Spalten und Zeilen. Wo sie sich schneiden, entstehen gleich große Rechtecke, die Module. Laut Nielsen Norman Group erweitert es das Spaltenraster um Zeilen; Bilder, Texte und Kacheln belegen ein oder mehrere Module.
- Modulares Raster
Ein Gestaltungsraster aus Spalten und Zeilen, deren Schnittflächen gleich große Module bilden.
Beispiel: „Die Produktübersicht folgt einem modularen Raster: jede Kachel ein Modul, die Aktion zwei.“Auch: Modulraster, englisch modular grid.
Abgrenzung zum Spaltenraster: Es ordnet nur die Breite, nicht die Höhe.
Woher das modulare Raster kommt
Das modulare Raster ist ein Kernwerkzeug des Swiss Style. Josef Müller-Brockmann beschrieb es 1981 in seinem Buch Rastersysteme für die visuelle Gestaltung; laut Verlag enthält es Anleitungen für Raster mit 8 bis 32 Feldern. Alex Hass betont, dass die Module immer gleich sind und ihre waagerechten Linien am Grundlinienraster liegen.
Wofür sich ein modulares Raster eignet
Die Nielsen Norman Group empfiehlt es für Shops und Listenseiten, wo viele gleichartige Elemente nebeneinander stehen. Auch Magazinlayouts, Dashboards und Kachel-Startseiten profitieren: Größere Elemente belegen einfach zwei mal zwei Module, und alles bleibt bündig.
Modulares Raster in CSS Grid
CSS Grid ist laut MDN ein zweidimensionales System, also genau für Spalten und Zeilen gemacht. Die Zelle ist die kleinste Einheit, Abstände entstehen mit gap. Grid ist seit April 2020 in allen großen Browsern weit verfügbar.
.kacheln {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 160px;
gap: 16px;
}
.kacheln .gross { grid-column: span 2; grid-row: span 2; }