Teil 6:
Alles, was ihr über das Contao Grid wissen solltet

Im sechsten Teil unserer Artikelserie CSS-Kurs für Contao dreht sich alles um das seit Version 3.0 vorhandene Contao Grid. Wie funktioniert es? Wann könnt ihr es verwenden? Und wann ihr solltet auf ein anderes Grid System setzen?

Erinnert ihr euch noch an die Zeit, bevor Grid-Layouts so richtig populär wurden? Damals sahen alle Websites irgendwie gleich aus. Zwischen <header> und <footer> hatten wir entweder

• 3 Spalten: Linke Spalte, Hauptspalte, rechte Spalte oder
• 2 Spalten: Linke Spalte, Hauptspalte oder für Blogs
• 2 Spalten: Hauptspalte, rechte Spalte.

Und viele Jahre sind wir damit gut gefahren. Klar, wir haben immer ein wenig neidisch auf die Print-Kollegen geschaut. Die konnten ihre Inhalte für eine Broschüre oder einen Flyer deutlich flexibler auf dem Papier arrangieren. Mithilfe eines vorher definierten Gestaltungsrasters – einem Grid Layout – legten sie fest, dass das Ergebnis hinterher trotzdem gut aussah.

Heute sind Grid Layouts im Web selbstverständlich. Gefühlt basieren 4 von 5 Websites, die heute entwickelt werden, auf einem Grid-Layout. Dennoch tun sich viele Nutzer immer noch schwer, Contao mit einem Grid Layout zu nutzen und das obwohl Contao sogar ein eigenes Grid-Framework integriert hat.

Mit diesem Artikel wollen wir das ändern.

Das Prinzip hinter einem Grid System ist relativ einfach erklärt. Die zur Verfügung stehende Fläche wird in eine feste Anzahl von Spalten unterteilt. Zwischen den Spalten wird ein fester Abstand definiert. Das kann zum Beispiel so aussehen:

Um die Abstände zwischen den Spalten hin zu bekommen, gab es in der Vergangenheit sehr unterschiedliche Ansätze. Heute basieren nahezu alle Grid Layouts auf einer der 2 folgenden Techniken:

Erschwerend kommt allerdings hinzu, dass nahezu jedes Framework eine eigene Vorstellung davon hat, wie die Gesamtbreite, die Spaltenbreite und die Abstände definiert werden:

• Spaltenbreite in Pixeln oder Prozent?
• Abstände in Pixeln, Prozent oder rem?
• Gesamtbreite inklusive oder abzüglich der äußere Abstände der ersten und letzten Spalte?

Und wie ist es beim contaoeigenen Grid gelöst?

Bereits im Jahr 2012 hat Leo Feyer mit Contao 3.0 ein auf 960.gs basierendes Grid-Framework (siehe Grafik 1) eingeführt. Dieses lässt sich superleicht über das Seitenlayout im Bereich CSS-Framework aktivieren und ist sogar <zitat>„responsive“</zitat>. Eher weniger leicht war es hingegen, zu verstehen, wie man das Grid-Framework benutzt. Deswegen waren viele Contao-Nutzer froh, als Peter Müller & Thomas Weitzel auf der Contao Konferenz 2013 zwei Workshops zu dem Thema veranstalteten.

Im Normalfall genügt es, wenn ihr einem Content-Element, einem Modul oder einem Artikel die entsprechende Klasse von .grid1- .grid12 gebt und das Objekt erhält die entsprechende Spaltenbreite. Allerdings ist es wichtig zu wissen, bei welchen Objekten Contao einen margin vorsieht und bei welchen nicht.

Die folgende Angaben stammen aus der grid.css von Contao, zu finden unter assets/contao/css/grid-uncompressed.css:

1. Float und Margin für alle Elemente, deren Klasse das Wort „grid“ enthält:

*[class*="grid"] {
	float:left;
	margin-left:10px;
	margin-right:10px;
	display:inline;
}

2. Margin für alle Elemente, innerhalb von .mod_article, wenn sie eine Klasse beginnend mit ce_ oder mod_ enthalten:

.mod_article *[class*="ce_"],
.mod_article *[class*="mod_"] {
	margin-left:10px;
	margin-right:10px;
}

3. kein Margin für .mod_article, wenn sie eine .grid-Klasse haben:

.mod_article.grid1,
.mod_article.grid2,
[…]
.mod_article.grid6,
[…]
.mod_article.grid12 {
	margin-left:0;
	margin-right:0;
}

Stattdessen wird der Abstand direkt in die Spaltenbreite eingerechnet:

.mod_article.grid1 { width:80px; }
.mod_article.grid2 { width:160px; }
[…]
.mod_article.grid6 { width:480px; }
.mod_article.grid12 { width:960px; }

Hier kommt es immer wieder zu Verwirrungen, weil viele Nutzer verunsichert sind, wann der Abstand per margin hinzugefügt wird und wann er bereits in der Spaltenbreite enthalten ist. Nachfolgende Grafik soll die 3 Anweisungen noch mal verdeutlichen:

Für weitere Infos könnt ihr euch auch die offizielle Contao Demo anschauen, die ebenfalls auf dem Contao Grid basiert.

Nachteile des Contao Grids

Dadurch, dass das Contao Grid pixelbasiert ist, lässt es sich auch nicht auf andere Layouts anwenden. Das Layout muss eine Desktop-Breite von exakt 960 Pixel haben, auf 12 Spalten basieren und die Spaltenabstände müssen 20 Pixel betragen. Für jeden anderen Zweck ist das Contao Grid unbrauchbar.

Vor 3 Jahren waren pixelbasierte Grid Layouts noch die Regel. Heute hingegen gelten sie als veraltet und fallen streng genommen auch nicht in die Kategorie Responsive Webdesign, sondern werden dem Adaptive Webdesign zugeordnet. Wer sich nur an den Pixeln im Grid stört, dem empfehlen wir, sich mal die Contao Extension [grid_16_columns] von Glen Langer alias BugBuster anzusehen. Die Erweiterung basiert auf 16 Spalten und verfügt wahlweise über ein pixelbasiertes oder prozentbasiertes Grid.

Aber vielen von euch wird das vermutlich nicht mehr reichen. Gerade, wenn man sich den Funktionsumfang von anderen Grids anschaut. In Bootstrap und Foundation lassen sich für jeden Viewport, wenn man denn will, ganz individuelle Spaltenaufteilungen erstellen. Heißt also, ein 6-spaltiges Layout auf dem Desktop, kann auch dem Tablet im Hochformat auch gerne 3-spaltig und auf dem Smartphone 2-spaltig sein. Möglich wird dies durch unterschiedliche Klassennamen, die man einfach miteinander kombiniert.

Dass das Contao Grid nicht mehr zeitgemäß ist, hat auch Joe Ray Gregory, einer der Betreuer der offiziellen Contao Demo, festgestellt. Auf Github hatte er deswegen eine Umfrage gestartet, welche Wünsche Entwickler an ein überarbeitetes Contao Grid hätten. Das Ergebnis: Die COD für Contao 3.5 soll sowohl ein prozentbasiertes 12-spaltiges Grid, als auch ein frei konfigurierbares Grid auf Basis von SCSS bekommen. Wir sind schon gespannt auf die neue Version.