960-Grid-System – Eine CSS-Bibliothek für Spaltenlayouts

Weitere Möglichkeiten

Das oben gezeigte, zweispaltige Layout mittels grid_4 und grid_8 ist z.B. recht praktisch, um schnell und unkompliziert einen Navigations- und einen Inhaltsbereich zu erstellen. Aber vielleicht sähe es ja besser aus, wenn der grid_4-Bereich rechts wäre und der grid_8-Bereich links? Um dies schnell zu testen, kennt das 960-Grid-System noch die Klassen push_X und pull_X, wobei das X auch hier für eine Zahl steht.

Um die Spalten zu tauschen, werden die beiden Zeilen im Listing oben geändert:

<div class="grid_4 push_8">
<div class="grid_8 pull_4">

Das ist alles. Wird die Seite im Browser neu geladen, dann sind die Spalten vertauscht.

Oder vielleicht soll aus optischen Gründen noch eine Leerspalte zwischen dem 4-spaltigen und 8-spaltigen Bereich stehen? Dazu ersetzt man die beiden Zeilen wie folgt:

<div class="grid_4 suffix_1">
<div class="grid_7">

Wer eine Leerspalte davor statt dahinter benötigt, der nutzt statt der CSS-Klasse suffix_X einfach prefix_X.

Unterspalten

Sollte eine weitere Unterteilung innerhalb der Spalten notwendig sein, so kennt das 960-Grid-System auch eine Lösung.

Um den grid_8-Bereich gemäß obigen Beispiel nach dem vorhandenen Text noch weiter in zwei vierspaltige Bereiche aufzuteilen, wird nach dem </p> noch folgendes HTML eingefügt:

<div class="grid_4 alpha">
  <p>Erste Unterspalte.</p>
</div>
<div class="grid_4 omega">
  <p>Zweite Unterspalte.</p>
</div>

Die Klassen alpha und omega stehen dabei für die erste und letzte Unterspalte.

Alternativen

Das 960-Grid-System ist nicht die einzige CSS-Bibliothek, die solche spaltenbasierten Layouts vereinfacht. So bietet z.B. auch die zur Zeit recht populäre, von Twitter entwickelte CSS-Bibliothek bootstrap.css ein Grid-System. Dieses ist 940 Pixel breit und »reagiert« auf unterschiedliche Media-Queries. Hier ist die Spaltenanzahl aber auf maximal 12 festgelegt.

Des Weiteren wird früher oder später auch ein Grid-Layout direkt via CSS3 möglich sein, ohne zusätzliche Bibliotheken. Allerdings befindet sich dieses System seitens des W3C noch im Entwurfsstadium und es gab schon verschiedene Änderungen an der Syntax. Wann eine finale, stabile Version feststeht und wann diese dann letztendlich von allen gängigen Browser unterstützt wird, ist offen.

Zusammenfassung

Die CSS-Bibliothek 960-Grid-System macht es einfach, Webseiten mit einem spaltenbasiertem Layout zu formatieren. Durch die Wahl der Gesamtbreite des Darstellungsbereichs von 960 Pixeln sind die Layouts gleichermaßen für Desktoprechner als auch mobile Geräte, die zumeist nur eine geringere Bildschirmauflösung besitzen, geeignet.

Autoreninformation

Jochen Schnelle (Webseite) programmiert ab und an Python-basierte Webapplikation. Das 960-Grid-System benutzt er dabei, um den Inhalt »in Form« zu bringen.

Dieser Artikel ist in freiesMagazin 09/2013 (ISSN 1867-7991) erschienen. Veröffentlichung mit freundlicher Genehmigung.