So arbeiten Sie mit Gridsystemen

Sogenannte Gridsysteme bieten Ihnen eine einfache Möglichkeit, Layouts auf Basis von Gittern aufzubauen. Diese bilden anschließend die Basis für die Anordnung von Texten, Bildern oder anderen Objekten.Sie können ein solches Gitter auch ohne weitere Hilfsmittel generieren. Der Vorteil eines Gridsystems ist neben der verkürzten Entwicklungszeit vor allem auch die Cross-Browser-Kompatibilität. Die Entwickler dieser Systeme geben Ihnen Auskunft darüber, welche Browser in der Lage sind, das generierte Layout zuverlässig und korrekt zu interpretieren.Seit der Einführung von CSS3 ist es verhältnismäßig einfach, eine Website in verschiedene Spalten zu unterteilen. Dies ging natürlich auch zuvor, brachte jedoch deutlich mehr Aufwand sowie mathematische Berechnungen mit sich. Die waren zwar nicht sonderlich tiefgreifend, man musste aber trotz allem sorgfältig überlegen und durfte nichts vergessen.

Manuelle Berechnungen

Um die Arbeit zu durchschauen, die ein Gridsystem für Sie leistet, sehen wir uns den Weg zum Ziel anhand eines einfachen Beispiels an: Sie haben einen Container mit der Breite von 1.200 Pixeln. Dieser soll in drei gleich große Spalten aufgeteilt werden, die dann folglich jeweils eine Breite von 400 Pixeln besitzen.Damit die Spalten sich nicht gegenseitig überlappen, ist es ratsam, ein wenig Abstand miteinzuberechnen. Dies geschieht über die Eigenschaft margin. Wenn Sie jeder der Säulen einen Außenabstand von 10 Pixeln zugestehen, dann müssen Sie diesen Wert entsprechend bei der Breite der Säulen abziehen. Damit haben diese keine Breite von 400 mehr, sondern nur noch von 380 Pixeln.Wenn Sie in das Layout noch eine seitliche Navigationsleiste einbetten wollen, die genau ein Drittel des Containers einnimmt, dann ist diese 400 Pixel breit und der Inhaltsbereich 800 Pixel - ohne den Außenabstand, der auch noch miteinbezogen werden sollte. Sie sehen, dies ist zwar mathematisch nicht sonderlich aufwändig, jedoch kann man sich bei der Gestaltung der einzelnen Spalten schnell in Details verlieren.

Ansatzpunkt eines Gridsystems

An dieser Stelle kommt das Gridsystem zum Einsatz: Es entwirft auf Basis Ihrer Angaben ein Gittersystem und setzt dieses auch direkt in CSS3 um. Es gibt eine Vielzahl von CSS Grid Frameworks, die für unterschiedliche Aufgabenstellungen entwickelt wurden.

Im Folgenden nutzen wir das Framework 960 GS. Es bietet Ihnen Unterstützung bei der Gestaltung von Websites auf Basis eines Gitters mit einer Breite von 960 Pixeln. Aus diesem Umstand leitet sich auch der Name ab.Sie fragen sich jetzt sicherlich, wie die nicht gerade gebräuchliche Anzahl von 960 Pixeln zustande kommt. Dies hat mit dem Aspekt zu tun, den wir bereits im Vorfeld erkannt haben: Die Aufteilung von Websites in verschiedene Abschnitte ist immer mit einem gewissen mathematischen Aufwand verbunden. Die Zahl 960 lässt sich gut teilen und bietet somit verschiedene Konstellationen und Aufteilungen an.Im Standard sieht 960 GS drei Grundmodelle mit 12, 16 und 24 Spalten vor. Beim Modell mit 12 Spalten besitzt die Spalte eine Breite von 60 Pixeln. Wenn Sie einen Bereich erweitern möchten, bedeutet dies immer einen Zuwachs von 80 Pixeln.Dies ergibt sich aus der Breite einer weiteren Spalte - also 60 Pixel - und dem Außenabstand einer Spalte von 10 Pixeln an jeder Seite. Sie haben somit insgesamt 12 Spalten mit einer Breite von 60 Pixeln, was 720 Pixel ergibt.Die restlichen 240 Pixel erstrecken sich auf elf Bereiche zwischen den Spalten mit einer Breite von jeweils 20 Pixeln sowie die beiden Bereiche vor der ersten und nach der letzten Spalte mit jeweils zehn Pixeln. Auf Basis dieser Umgebungsvariablen stehen Ihnen somit Spalten in der Breite von 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 und 940 Pixeln zur Verfügung.Die Umsetzung der 16-Spalten-Variante erfolgt auf die gleiche Art und Weise, wobei an dieser Stelle eine einzelne Spalte lediglich 40 Pixel breit ist und der Bereich jeweils um 60 Pixel vergrößert werden kann. Daraus ergeben sich mögliche Breiten von 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 und 940 Pixeln.

Umsetzung in CSS-Klassen

Die Abbildung der einzelnen Bereiche erfolgt in 960 GS über Klassen. Für jeden Bereich gibt es eine korrespondierende Klasse. Wenn Sie einen solchen Bereich darstellen möchten, weisen Sie Ihrem div-Tag nur die entsprechende Klasse zu und dieser erhält die entsprechende Breite.Die Namen der Klassen sind aufsteigend nummeriert: Diejenige, welche den kleinsten Bereich kennzeichnet, trägt den Namen grid_1, die nächstgrößere entsprechend grid_2 bis hin zum breitesten Exemplar, welches bei zwölf Spalten den Namen grid_12 und bei 16 Spalten grid_16 trägt.Dank dieser Vorgehensweise und der zugehörigen Namensgebung können Sie recht schnell das gewünschte Layout entwerfen und umsetzen. Ob Sie Ihre Spalten komplett ausgefüllt haben, sehen Sie dank der Namensgebung, wenn Sie die Ziffern der Klassen addieren. Kommt in einem solchen Fall nicht 12 beziehungsweise 16 als Ergebnis heraus, haben Sie Ihre Spalten nicht korrekt angeordnet.Sie sollten natürlich auch nicht vergessen, im Vorfeld festzulegen, welches der beiden Modelle Sie verwenden möchten. Dazu weisen Sie Ihrem Layout ein übergeordnetes div-Tag zu: Für die 12-spaltige Variante versehen Sie dies mit der Klasse container_12, das 16-spaltige Gegenstück wird durch die Klasse container_16 repräsentiert.

Push und Pull

Das Framework erlaubt Ihnen jedoch nicht nur, Elemente mit Hilfe von Klassen zu positionieren. Es bietet auch einen Mechanismus, diese umzuordnen. Dazu gibt es innerhalb von CSS pull- und push-Klassen. Wenn Sie beispielweise mit dem 12-Spalten-Layout arbeiten und vier gleich große Spalten haben, dann wird dies, wie zuvor beschrieben, über vier grid_3 Klassen dargestellt.Mit den push- und pull-Klassen können Sie verschiedene Elemente neu anordnen und nach links oder rechts verschieben. push beschreibt die Verschiebung nach rechts, pull das entsprechende Gegenstück nach links.Für die Abbildung der Verschiebung weisen Sie den entsprechenden div-Tags die zusätzlichen Klassen zu. Im Beispiel werden die beiden äußeren Bereiche jeweils um eine Spalte nach innen verschoben. Daraus ergibt sich die folgende Definition:

Sie können die Bereiche natürlich auch um mehr als eine Spalte verschieben. Erhöhen Sie dazu einfach den Zähler im Namen. push_2 verschiebt somit einen Bereich um zwei Spalten nach rechts, pull_3 um drei Spalten nach links.

Definition und Erscheinungsbild

Dank dieser Vorgehensweise ist es möglich, die Reihenfolge der Definitionen in der HTML-Definition und den Ort für die Darstellung zu entkoppeln. Im folgenden Beispiel gibt es vier Bereiche: Auf der ersten Ebene sind die drei Container firmenlogo, ueberschrift und werbung verteilt angeordnet: Das Logo umfasst sechs Spalten, die beiden anderen jeweils drei. Auf der zweiten Ebene gibt es einen Container inhalt, der sich über die komplette Breite erstreckt.Für die Darstellung wird das 12-Spalten-Layout verwendet.

Wenn Sie anschließend entscheiden, die Position des Logos und der Überschrift zu vertauschen, gibt es zwei Wege: Entweder Sie tauschen die beiden Abschnitte innerhalb des HTML-Codes aus. Damit steht jedoch das Logo nicht mehr an erster Stelle und verliert innerhalb des Programmcodes unter Umständen an Aufmerksamkeit.Ein weiterer Aspekt, nichts an der Sortierung zu verändern, könnte im Bereich SEO liegen. Die Stelle, an welcher ein Inhalt innerhalb des Textes auftaucht, hat für die Suchmaschinen eine gewisse Relevanz.Dies können Sie entsprechend mit Hilfe der push- und pull-Klassen beeinflussen, denn mit diesen können Sie auch das Logo um drei Spalten nach rechts verschieben, also push_3, und die Überschrift um sechs Spalten nach links, also pull_6.

Platzhalter

Innerhalb eines Designs kann es auch Flächen geben, die einfach leer sind. Dazu bietet Ihnen das Framework zwei unterschiedliche Wege an: Entweder Sie verwenden einen Bereich, den Sie anschließend nicht mit Inhalt füllen, oder Sie nutzen die beiden Klassen prefix und suffix, mit denen Sie bewusste Leerräume schaffen.Von den beiden Klassen gibt es jeweils wieder längenabhängige Ausprägungen, also prefix_1 bis prefix_n, und das Gleiche bei den suffix-Klassen. Der Zähler repräsentiert jeweils eine Leerspalte.

In der Darstellung haben Sie in diesem Fall einen ersten Bereich, der vier Spalten umfasst, anschließend vier Leerspalten und zum Abschluss noch einmal einen Bereich mit acht Spalten.Mit Hilfe von suffix_n können Sie somit einen leeren Bereich rechts von einer Spalte anfügen. Dies geht auch auf der anderen Seite unter Verwendung der prefix-Klassen. Das folgende Beispiel kommt zum gleichen Ergebnis wie zuvor, hängt den leeren Bereich jedoch links vor den Kasten um Bereich 2.

Anfang und Ende

Wenn Sie sich die vorherigen Definitionen anschauen, dann haben Sie sicherlich bereits den leeren Bereich vor der ersten Spalte bemerkt. Prinzipiell wird jede Spalte mit einem Außenabstand versehen. Sie können dies jedoch auch für die erste und letzte Spalte entsprechend deaktivieren und als Bezugspunkt die Einstellungen des übergeordneten div-Tags verwenden.

In diesem Fall würde die erste Spalte direkt am linken Ende des Containers beginnen und die letzte am rechten Ende des Containers enden.Dabei orientiert sich die Kindklasse immer an der übergeordneten Elternklasse. Dieses Verhalten setzen Sie mit den beiden Klassen alpha und omega um, mit denen Sie die entsprechenden Kindklassen kennzeichnen.Das folgende Beispiel stellt ein Gridsystem mit 16 Spalten dar, das in drei Bereiche aufgeteilt ist. Der erste umfasst vier Spalten, der zweite acht und der letzte noch einmal vier.

In diesem Fall beginnt die Anzeige der Texte nach der Umrandung von zehn Pixeln und orientiert sich somit am inneren div-Tag. Wenn Sie jedoch die div-Tags von Bereich 1 und Bereich 3 mit der alpha- beziehungsweise der omega-Klasse versehen, dann ändert sich dies und der Text rückt um zehn Pixel weiter nach links.

Formatierungen zurücksetzen

Wenn Sie im Anschluss an die div-Tags und Formatierungen mit zusätzlichen CSS-Klassen weiterarbeiten, die vorherigen jedoch nicht übernehmen möchten, dann sollten Sie diese entsprechend zurücksetzen. 960 GS bietet Ihnen für diese Aufgabe zwei unterschiedliche Klassen an: clear und clearfix.

Wenn Sie die clear-Klasse einsetzen, wird diese im Zusammenspiel mit einem div-Tag am Ende des jeweiligen Abschnitts platziert, also am Ende einer jeden Spaltenreihe, bevor Sie einen logischen Umbruch machen und mit einer neuen Aufteilung der Spalten beginnen.Alternativ dazu können Sie sich auch das zusätzliche div-Tag sparen und das Zurücksetzen der Formatierungen über die zusätzliche Klasse clearfix realisieren. Diese verwenden Sie im Zusammenspiel mit der letzten Bereichsdefinition einer Reihe.

Fazit

Die Arbeit mit einem CSS-Gridsystem erleichtert die Platzierung von Objekten sowie die Aufteilung des Bildschirms ungemein. Der Workshop hat Ihnen die Grundprinzipien eines Gridsystems näher gebracht und mit den Beispielen aus 960 GS vielleicht Lust auf mehr gemacht.Zum Gridsystem finden Sie auf der Website des Herstellers eine Reihe von zusätzlichen Tutorials und Beispielen, wobei auch das Download-Paket mit einer Reihe von Demos aufwarten kann.Darüber hinaus finden Sie in diesem Paket auch zwei Plug-ins für Fireworks und Photoshop zur einfacheren Gestaltung der Grids sowie zahlreiche Templates für unterschiedliche Grafikprogramme, die als Vorlage für die Aufteilung von Oberflächen verwendet werden können.