6.1 Rows & Columns
- Stefan Keller
Checkliste & ToDo’s
Grid-System
Ein Grid-System ist ein Raster aus Zeilen und Spalten, das zur Anordnung von Inhalten verwendet wird.
Im Falle von TourismusWeb ist das Grid-System ist eine Art unsichtbares Raster mit 12 Spalten. Ein Grid besteht immer aus min. 1 Zeile (Row) sowie max. 12 Spalten (Columns).
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
8% | 8% | 8% | 8% | 8% | 8% | 8% | 8% | 8% | 8% | 8% | 8% |
Zudem hat man die Möglichkeit ein Raster in einem Raster zu anzulegen und so bspw. auch 24 Spalten zu generieren. Oder man kann mehrere Spalten zu einer Spalte zusammenfassen, genau so wie man dies bei einer Exceltabelle macht.
Wichtig: Alle Elemente haben ein Start und ein Ende. Im Backend sieht man dies gut anhand der eingerückten Elemente.
Gut | Fehlerhaft (“Column - Start” fehlt) |
|---|---|
 | 
|
Rows / Zeilen
Rows in einem Grid-System dienen dazu, Inhalte strukturiert in einer horizontalen Linie anzuordnen. Sie sind besonders nützlich, um:
Spalten sauber zu organisieren: Innerhalb einer Row können mehrere Columns nebeneinander platziert werden.
Layout zu strukturieren: Rows helfen, verschiedene Bereiche eines Layouts voneinander abzugrenzen.
Rows haben nur 100% Platz, wenn man also mehrere Spalten platziert, welche zusammen mehr Platz benötigen, bricht die Zeile automatisch um und ordnet die überzähligen Spalten auf einer neuen Zeile an.
Columns / Spalten
Columns (Spalten) in einem Grid-System sind dafür da, Inhalte vertikal innerhalb einer Row zu organisieren. Sie sind wichtig, um:
Inhalte nebeneinander anzuordnen – z. B. Text neben einem Bild.
Breitenverhältnisse zu steuern – z. B. 2/3 Text und 1/3 Bild.
Unterstützung von Viewports um responsives Verhalten zu definieren – Columns können sich je nach Bildschirmgrösse unterschiedlich verhalten (z. B. übereinander auf dem Handy, nebeneinander am Desktop).
Flexibilität im Layout zu ermöglichen – Inhalte lassen sich gezielt und präzise platzieren (bspw. sichtbar / unsichtbar machen - abhängig vom Viewport).
Viewports
Die folgenden Viewports werden unterstützt:
Viewport | Grösse | Ideal für |
|---|---|---|
Extra small (xs) | <576px | Mobile Hochformat |
Small (sm) | ≥576px | Mobile Querformat |
Medium (md) | ≥768px | Tablet Hochformat |
Large (lg) | ≥992px | Tablet Querformat Laptop (mini) |
Extra large (xl) | ≥1200px | Laptop Desktop |
Extra extra large (xxl) | ≥1400px | Desktop TV |
Pro Spalte kann angegeben werden wie sich der Inhalt in der Spalte pro Viewport verhalten soll. Es gilt dabei der Mobilefirst Ansatz. Das bedeutet, dass die Werte jeweils vom kleinsten Viewport (xs) vererbt werden, solange bis bei einem grösseren Viewport eine andere Option gesetzt wird:
Option | Zweck |
|---|---|
Breite vererben | Übernimmt die Einstellung des kleineren Viewports (also bspw. bei |
Verbergen | Blendet die Spalte in diesem Viewport aus. Bspw. kann man so etwas speziell für Desktop ausgeben und für Mobile verstecken (oder umgekehrt). |
Automatisch | Spalte passt sich automatisch dem verfügbaren Platz an. Wird meist verwendet, wenn keine feste Breite nötig ist. |
8% - 12 Spalten | Geht davon aus, dass man in der gleichen Zeile bei diesem Viewport noch andere Spalten in der gleichen (oder anderen) Grösse vorhanden sind. |
17% - 6 Spalten | Geht davon aus, dass man in der gleichen Zeile bei diesem Viewport noch andere Spalten in der gleichen (oder anderen) Grösse vorhanden sind, maximal aber 6 weitere Spalten. |
25% - 4 Spalten | Geht davon aus, dass man in der gleichen Zeile bei diesem Viewport noch andere Spalten in der gleichen (oder anderen) Grösse vorhanden sind, maximal aber 8 weitere Spalten. |
33% - 3 Spalten | Geht davon aus, dass man in der gleichen Zeile bei diesem Viewport noch andere Spalten in der gleichen (oder anderen) Grösse vorhanden sind, maximal aber 9 weitere Spalten. |
42% | Etwas breiter als ein Drittel – geeignet für asymmetrische Layouts mit z. B. 42% / 58%-Aufteilung. |
50% - 2 Spalten | Geht davon aus, dass man in der gleichen Zeile bei diesem Viewport noch andere Spalten in der gleichen (oder anderen) Grösse vorhanden sind, maximal aber 2 weitere Spalten. |
58% | Gegenstück zur 42%-Spalte – häufig für asymmetrische Layouts mit 42% / 58%-Verhältnis genutzt. |
67% | Zwei Drittel der Zeile – geeignet für Layouts mit 2/3 zu 1/3 Aufteilung. |
75% | Drei Viertel der Zeile – kann z. B. mit 25% kombiniert werden. |
83% | Sehr breiter Bereich – lässt nur noch wenig Platz für zusätzliche Spalten. |
92% | Fast volle Breite – geeignet für einzelne Inhalte mit minimalem Rand. |
100% - 1 Spalte | Die Spalte nimmt die komplette Zeilenbreite ein – typischerweise bei einem Element pro Zeile. |
Viewports - Offset
Ein Offset verschiebt eine Spalte nach rechts, ohne dabei selbst Inhalt anzuzeigen. Man nutzt es, um Abstände zwischen Spalten zu schaffen oder um Inhalte nicht ganz links beginnen zu lassen.
Ein Offset zählt zusätzlich zur bereits definierten Spaltenbreite und belegt auch Platz im Grid.
Wenn man Spalte + Offset + andere Spalten kombiniert, darf die Summe 12 Spalten nicht überschreiten, sonst bricht das Layout.