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?