Direkt zum Inhalt springen

Grid

Was sind Grids?

Grids oder Gestaltungstraster dienen der Ordnung unserer Inhaltselemente. Das Schwyz-Layout besteht aus einem 4spaltigen Grid. Die linke Spalte ist dabei immer für die Subnavigation reserviert. Somit nimmt der Inhaltsbereich – worin auch diese blaue Box steht – insgesamt 3 Spalten ein. Diese Spalten können bei Bedarf genutzt werden.

Ein Grid-Konstrukt besteht immer aus Zeilen (  row  ) und Spalten (  col-X  ), wobei X hier für die Anzahl Spalten steht, die vereint werden. Mit Hilfe des Grids können so innerhalb einer Zeile mehrere Elemente (beispielsweise Boxen) nebeneinander angeordnet werden.
Hier im Beispiel sind sie mit einer zusätzlichen box Klasse sichbar gemacht worden. Üblicherweise werden sie aber eher unsichtbar genutzt.

Achtung Mobile!

In der Mobile-Ansicht (hier unter 600 Pixeln Bildschirmbreite), wo der Platz beschränkt ist, werden die Spalten automatisch untereinander angeordnet.

Nicht vergessen werden darf auch, dass zwischen Dektop- und Mobilansicht viele weitere Stufen liegen, in denen die Spalten immer schmaler werden. Diese Flexibilität der Spaltenbreiten sollte bei ihrem Einsatz bedacht und getestet werden.

col-1
col-1
col-1
col-2
col-1
col-1
col-2
col-3
col-half
col-half