Das Broken Grid Layout versucht, in der Webentwicklung eine Balance zwischen Kreativität und funktionierender Benutzeroberfläche zu schaffen, indem es Seitenlayouts, die auf Rastern und Gittern fußen, vorsichtig durchbricht. Dadurch sollen dynamische Effekte erzielt und die Aufmerksamkeit der Betrachter auf die Einzigartigkeit einer Website gelenkt werden.
Standardisierte Rastervorlagen und Layouts sind im Web eigentlich die Mehrheit. Sie verbinden UX, Flat-Design und intuitive Userführung zu einem überzeugenden Weblayout. Sie stehen für Stabilität und auch Struktur, indem sie den Webdesignern eine logische Vorlage liefern. Dabei ist das Grid eine Hilfe, aber keine Garantie für exzellente Arbeit, und ein guter Webentwickler weiß, wie er die Gitter nutzt bzw. wann er sie durchbricht. So kann er etwa für eine Website ein anderes Layout wählen, wie etwa das Broken Grid Layout, und damit die Sichtbarkeit der jeweiligen Marke steigern und die Conversion erhöhen. Das Broken Grid Layout verwendet dafür asymmetrisch angeordnete Texte, überlappende Bilder und relativ unregelmäßige Formen, ohne dass dabei jedoch an der Benutzerfreundlichkeit gespart wird.
Das Grid ist für die Erstellung einer Website eine Strukturvorlage, um Texte, Bilder, Videos etc. auf dem Bildschirm relativ zueinander anzuordnen. Es ist eine Richtschnur und ermöglicht eine visuelle Sprache, wie etwa das bekannte 960.gs oder das Bootstrap, die den Workflow bei der Webentwicklung stark verbessern. Doch diese Rastervorlagen können die Entfaltung auch behindern, indem sie nämlich etwas vorhersehbar wirken.
Webentwickler nutzen deshalb das Broken Grid Layout für ungewöhnliche Positionierungen, die eben nicht relativ zueinander sind. Dafür mixen sie Text, Überschriften, Bilder und Leerzeichen, ungewöhnlich genormte Header etc., die nur scheinbar zufällig sind, um neugierige Kunden zu erstaunen. Wichtige Attribute wie etwa der Warenkorb sind beim Broken Grid Layout jedoch immer noch an den vorgesehenen Flächen, alles andere wirkt hingegen etwas ungewöhnlich und im besten Fall auch unvergesslich.
Der Webentwickler kann dafür die Überlappung von verschiedenen Elementen nutzen und so einen collageartigen Effekt erzielen. Genauso können Animationen, Produktbilder und Texte aus dem Grid herausfallen. Wichtig scheint, dass die Webentwicklung bei diesem Webdesign mit dem Raster spielt und nicht wie beim Web-Brutalismus den Besucher überstrapaziert. Es enthält vielmehr Anleihen aus dem asymmetrischen Layout. Das Raster ist beim Broken Grid Layout sehr wohl noch vorhanden, wird auch verwendet, findet jedoch eine nicht genormte Anwendung, wie etwa durch unregelmäßige Abstände. Es gilt, beim Broken Grid Layout vorsichtig vorzugehen und die UI-Konvention nicht ganz und gar aufzugeben.