Grid Layouts

Layouts gestalten mit responsiven Grids

Die grosse Mehrheit aller möglichen Layouts lässt sich meist auf irgend eine Gitterstruktur reduzieren. Zu diesem Zwecke eignet sich, insbesondere für Anfänger, die Verwendung eines Grid Generators wie zum Beispiel derjenige von Responsive Grid System. Dieser erlaubt bis zu 12 Spalten und einen frei wählbaren Spaltenabstand (Margin).

Der Kern der Responsivität dieser Gitter ist, dass die einzelnen Zellen die Eigenschaft "float" besitzen ("schweben"), was das Umwandeln von 2-12-spaltigen Layouts in einspaltige Mobil-Layouts ermöglicht; und die Breiten ("width") der Zellen immer in prozentualen Werten angegeben sind, so dass sich das gesamte Gitter problemlos skalieren lässt.

Auf der Seite Downloads befinden sich einige Mustervorlagen, die mit diesem Grid Generator gebaut sind, inklusive fixierten Elementen und responsivem, zuklappenden Menü.

Mit etwas Übung lässt sich aus einer einfachen Skizze (siehe Bild) mittels Grid ein funktionierendes, responsives Layout bauen.

Beim Bau eines solchen Layouts empfiehlt es sich, jedem Element vorerst eine andere Hintergrundfarbe (background-color) zu geben, damit diese auch sichtbar werden. Die Farben können später entfernt werden.