Direkt zum Inhalt springen

Grid

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 16spaltigen Grid. Auf einem grossen Bildschrim umfasst die linke Navigation 4 dieser Spalten, der Inhalt 8 Spalten und die rechte Sidebar die übrigen 4 Spalten (4 + 8 + 4 = 16).

Grundaufbau

 

Grid im Inhaltsbereich

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

8 Spalten (volle Inhaltsbreite)

col-8

4spaltig

col-4

4spaltig

col-4

2spaltig

col-2

2spaltig

col-2

2spaltig

col-2

2spaltig

col-2

2spaltig

col-2

4spaltig

col-4

2spaltig

col-2

6spaltig

col-6

2spaltig

col-2

In der Praxis sind im Inhaltsbereich aus Platzgründen nicht mehr als 2 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?