Grid
Grids oder Gestaltungstraster dienen der Ordnung unserer Inhaltselemente. Sie bestehen aus Zeilen ( row
) und Spalten ( col-X
), wobei X hier für die Anzahl Spalten steht, die eine Spaltenbox umfasst. Mit Hilfe eines 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 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?