Grids

Grids oder Gestaltungstraster dienen der Ordnung unserer Inhaltselemente. Es besteht aus Zeilen ( row ) und Spalten ( col-X ), wobei X hier für die Anzahl Spalten steht, die eine Spaltenbox umfasst. Mit Hilfe des Grids können so innerhalb einer Zeile mehrere Elemente (beispielsweise Boxen) nebeneinander angeordnet werden. In der Mobile-Ansicht, wo der Platz beschränkt ist, werden die Spalten dann in der Regel vertikal untereinander angeordnet.

Dieses ganze Layout basiert auf einem 12spaltigen Grid. Auf einem grossen Bildschrim umfasst die linke Navigation 3 dieser Spalten, der Inhalt 6 Spalten und die rechte Sidebar die übrigen 3 Spalten (3 + 6 + 3 = 12).

Grundaufbau

 

Grid im Inhaltsbereich

Den 6spaltigen Inhalt können wir bei Bedarf weiter unterteilen. Die Summe der darin enthaltenen Spalten muss aber immer 6 ergeben:

6 Spalten (volle Inhaltsbreite)

col-6

3spaltig

col-3

3spaltig

col-3

2spaltig

col-2

2spaltig

col-2

2spaltig

col-2

1spaltig

col-1

1spaltig

col-1

1spaltig

col-1

1spaltig

col-1

1spaltig

col-1

1spaltig

col-1

2spaltig

col-2

4spaltig

col-4

4spaltig

col-4

2spaltig

col-2

In der Praxis sind im Inhaltsbereich aus Platzgründen nicht mehr als 2, maximal 3 Spalten sinnvoll. Wichtig bei Grids im Inhaltsbereich ist jeweils ein Test der Responsive-Tauglichkeit: Hat der Inhalt der Spalten genug Platz, auch wenn die Fensterbreite verkleinert wird?