Contao 3 Grid Verständnis

**freak_me11** · 28.11.2012, 10:14

Hallo,

ich versuche mich gerade ein wenig in Contao 3 einzuarbeiten.

Um nun auch responsive (bzw. für mobile Endgeräte optimierte) Webseiten zu entwickeln, spiele ich gerade mit dem Grid-System.
Was ich schon verstanden habe ist, dass es insg. 12 Grids gibt -> Diese sind pixelbasiert und auf einer Gesamtbreite von 960px angelegt.

FRAGE 1:
Wenn ich dem Wrapper anstatt der Gesamtbreite von 960px z.B. eine Gesamtbreite von z.B. 1.140px geben möchte. -> Was muss ich machen?
Hier steht leider nicht beschrieben was man machen muss -> http://contaogrid.glen-langer.de/pro...alten-3cl.html
Man müsste doch eigentlich die responsive.css komplett anpassen oder?

-> https://github.com/BugBuster1701/contao_grid_16_columns
-> https://contao.org/de/extension-list....20003.de.html

FRAGE 2:
768 Pixel bis 979 Pixel -> Spalten werden verkleinert und die Gesamtbreit auf 744 Pixel reduziert -> O.K.
kleine als 768 Pixel, hier werden alle Floatings abgeschaltet, die Ränder auf 0 gesetzt und die Breite auf Automatik -> Hierfür muss man dann eigentlich immer ein eigenes Seitenlayout anlegen oder?

FRAGE 3:
CSS-Framework in Contao 3:
- CSS-Reset -> klar.
- Responsive Grid -> Fügt die Grids ein oder? Ist also die responsive.css
- Layout-Builder -> Was macht das genau?

Wäre super, wenn ihr mir bei den Fragen weiter helfen könntet und mir evtl. ein paar Links an die Hand gebt, um das Ganze besser verstehen zu können.

Vielen LIEBEN Dank schon mal!

**BugBuster** · 28.11.2012, 12:31

Frage 1: Da warst du schon dicht dran: https://github.com/BugBuster1701/con...ressed.css#L16
Da siehst du es, in meinen CSS Grid Dateien steht diese Bereite fest drin.

Frage 2:

Hierfür muss man dann eigentlich immer ein eigenes Seitenlayout anlegen oder?

Nein, muss man nicht. Du kannst für "mobile" Geräte ein eigenes Layout definieren.

Frage 3:

Layout-Builder

Der sorgt für die Zentrierung der Seite und die Definition der Spalten und die Berechnung für das Holy Grail Layout.
Wenn du eine reine Grid Seite machen willst, kannste den fast weglassen, du musst dann aber einige Dinge per Hand nachbauen. Siehe den Thread im Forum hier von Nina.

**freak_me11** · 29.11.2012, 15:46

O.K. vielen Dank.

Was muss ich machen, wenn mir die Grid-Abstände zu gering sind? Muss ich dann die komplette CSS Datei umschreiben oder gibt es da einen Trick?

**BugBuster** · 29.11.2012, 16:07

Du könntest z.b ein padding-left setzen. Nicht die Haupt IDs dazu nehmen (#left,#main,#right), immer die .inside ansprechen! (oder noch weiter innnen)
Sonst könnte es passieren dass das Holy Grail zerhauhen wird.

Die Grid Klassen darfst du nicht anpassen (einzelne), sonst stimmen die ganzen Summen nicht mehr.
Ein Prozent Grid muss immer auf 100% kommen, egal ob man eine, zwei, oder mehr Spalten nimmt, inkl. der Abstände.
Bei Pixel ist das genauso, wenn in Summe mehr als 960px (Contao Core Variante) rauskommt, passt es schon nicht mehr in den wrapper und Peng haste ne Verschiebung.

**freak_me11** · 29.11.2012, 16:11

Hmmm O.K.

Ich habe ein zwei Spalten Layout: #left und #main. Aber ich habe nicht #left und #main angelegt, sondern nur #main. Dann habe ich den Artikel, der links angezeigt werden soll grid6 zugeteilt. Somit habe ich ja zwei Spalten... Demnach kann ich dem #main kein padding-left geben...