Das Grid, auch ‚Rastersystem‘ oder ‚Gestaltungsraster‘ genannt, ist das Ordnungssystem für die visuelle Kommunikation. Es ist eine vorgegebene Struktur, mit der Bauelemente und Komponenten des Designs – wie Typografie, Bilder, Illustration, Animation etc. – angeordnet werden.
Ein Grid nimmt dabei den Webentwicklern Arbeit ab und unterstützt das Layout einer Website, indem es logische Vorgaben erstellt, auf denen ein stabiles und strukturiertes Weblayout basieren kann. Für die Webentwicklung wird in der Regel ein hilfreiches und formgebendes Grid verwendet, um die einzelnen Elemente gleichmäßig und in Relation zueinander in einer ganzen Reihe von vertikalen und auch horizontalen Spalten zu unterteilen. Die Ausrichtung muss dabei korrekt erscheinen und eine gewisse Form der visuellen Hierarchie gewährleisten, um die UX und die UI zu optimieren. Dabei spielen in der Webentwicklung die vertikalen Gitterlinien eine stärkere Rolle als die horizontalen. Das Grid bezieht auch Ränder, Leerzeichen und Spalten mit ein.
So gewährleistet es ein zusammenhängendes Design und die Vermeidung von CSS-Fehlern. Das Grid bietet zudem eine wesentlich schnellere Entwicklung von Prototypen und wirkt wie ein Wireframe. Die Voraussetzungen für spätere einfache und zeitsparende Änderungen sind sehr gut.
Durch die Verwendung einiger grundlegender Gestaltungsprinzipien innerhalb des Grids – darunter das Gesetz der Nähe, Gesetz der Schließung oder Gesetz der Symmetrie und der Kontinuität – erhalten Webentwickler eine visuelle Hierarchie, die für Übersichtlichkeit und intuitive Nutzung sorgen. Das Prinzip wurde von Usern erlernt, da es häufig auf Websites angewendet wird, sodass dieser es quasi automatisch nachvollziehen kann.