Contao + Gridsystem | Anfängerfrage

[slw]

Hallo zusammen,

ich habe viel gesucht und dennoch finde ich leider keine Anleitung für die anwendung eines Gridsystems.

Eine Anfängerfrage:
Wie schaffe ich es überhaupt ein Element mithilfe vom Grid zu Positionieren bzw. die Größe zu definieren?
Wo und wie definiere ich die Werte?

Über einen kleinen Denkanstoß würde ich mich freuen

[BugBuster]

Grob: http://contaogrid.glen-langer.de/contao-3-grid.html

Die Grid Klassen grid1 bis grid12 (bzw. grid16 je nach Grid System) werden als Klassen den Artikeln zugeordnet.
Darin kann man dann auch Elementen wiederum die Klassen zuweisen.

Das Grundprinzip eines Grid Systems, was sind die Spalten, warum sollte das in Summe immer 12/16 ergeben, sollte man aber verstanden haben.

[slw]

Danke für die schnelle Antwort! Prinzip, habe ich verstanden. Leider fällt mir der Anfang schwer.

Wo weise ich in Contao z.b. ce_text die Position zu? Wie gehe ich dafür vor?

Danke für die Hilfe

[BugBuster]

Gehen wir mal davon aus, dass du die Main Spalte per Grid in 3 Spalten aufteilen willst, so als wenn du per Layout Builder Left und Right definiert hättest.

Dann würde man eine Seite anlegen und in der Seite 3 Artikel.
In der Artikel Definition gibts du nun unten die Grid Klasse an. Beim ersten und dritten Artikel grid3, beim mittleren grid6.
Dann hättest du eine linke und rechte Spalte die halb so bereit ist wie die Hauptspalte.
Die Summe ergibt 3+6+3 = 12, bei einen Grid was auf 12 Spalten basiert und 960px Gesamtbreite ist das nun eine vollständige Zeile.
bzw. 240px+240px+480px=960px, wobei hier die 2x10px Abstände schon mit eingerechnet sind.

Hinweis, die Artikel müssen Inhalt haben, sonst könnte es passieren das die nicht dargestellt werden.

So. Du kannst nun innerhalb des Artikels ganz normal mehrere Artikel Elemente haben.
Diese kannst du auch per Grid wiederum nebeneinander bringen.
Z.B. innerhalb des Grid 6 Hauptartikels, können 2 Elemente per grid3 Definition (3+3=6) wieder nebeneinander gelegt werden.
Bei den Einstellungen des Artikelelementes kann auch hier wieder unten eine Klasse angegeben werden.

--------------------

Hier mal ein Beispiel für eine Grid mit 16 Spalten.
* 3 Artikel nebeneinander (3+10+3) bilden left-main-right nach
* im Hauptartikel 4 Text Elemente: ein grid10 ce_text Element, darunter 2x ein grid5 ce_text Element, darunter wieder ein grid10 ce_text Element.

http://contaogrid.glen-langer.de/pix...alten-3cl.html

Alles klar?


Noch ein Hinweis: Dies gilt für Pixel basierte Grids. Bei Prozent basierten Grids fängt die Berechnung innerhalb eines Artikels wieder bei 100% an.
Beispiel dafür findest du auch auf der Seite von mir.