Contao 4 Grid

Contao 4 bringt ein "Responsive Grid" mit. Diese CSS Datei kann im Layout bei CSS-Framework aktiviert werden.

Dieses Grid ist pixelbasiert und hat eine Gesamtbreite von 960 Pixel sowie 12 Spalten. Wer sich die Definitionen mal direkt ansehen möchte, die Dateien sind zu finden unter: /assets/contao/css/responsive.css bzw. grid.css

Die CSS Klassen sind als grid1 bis grid12 definiert. Die Spalten haben jeweils links und rechts einen Abstand von 10 Pixel. In der CSS Datei sind außerdem zwei Media Query Einträge:

• 768 Pixel bis 979 Pixel, Spalten werden verkleinert und die Gesamtbreite auf 744 Pixel reduziert
• kleine als 768 Pixel, hier werden alle Floatings abgeschaltet, die Ränder auf 0 gesetzt und die Breite auf Automatik

Normalerweise wird mit diesem Grid direkt gearbeitet ohne den Layout Builder zu nutzen und ohne der Definition einer linken und/oder rechten Spalte im Layout. Die Spalten werden dann z.B. mit 3 Artikel die nebeneinander gelegt werden nachgebildet (left,main,right : grid3-grid6-grid3).

 

Wer den Layout Builder inkl. Spalten und Holy Grail Layout in Verbindung mit dem Responsive Grid nutzen möchte, der definiert einfach z.B. für left den Pixelwert der Grid Spalte + 2x10 Pixel (Abstand). Bei grid3 wäre das also 220px + 2x10px = 240px. Wichtig ist hier, es muss einer der Grid Klassen Breiten genommen werden als Basis, damit in Summe aller Grid Spalten wieder die 960 Pixel heraus kommen.

Auf der Contao Konferenz 2013 gab es für Contao 3 auch einen Vortrag dazu von Peter Müller: Das Responsive Grid