Contao Standard Grid

[Acta]

Moin Jungs und Mädels,

ich habe bisher immer einen Bogen um Grids gemacht. Doch mich würde das ganze jetzt mal interessieren.

Gibt es zum Contao Grid ein Tutorial oder Anleitung bzw. habt ihr schon Seiten mit dem Contao Grid erstellt?

Dann könnte ich mir das ganze mal anschauen um die Möglichkeiten besser einzuschätzen!

[denniserdmann]

Moin Acta,

die Contao Demo basiert soweit ich weiß auf dem Contao-Grid.
Schau mal hier: http://demo.contao.org/

Grüße,
Dennis

[Acta]

Stimmt das natürlich ein gutes Beispiel!

[Acta]

Mal angenommen

Ich habe eine Seite -> Header - Main - Footer

Den Main bereich möchte ich via Grid gestalten.

Im Layout habe ich auf der Startseite das Modul Nachrichtenliste. Das Modul hat die Klasse grid6. Demzufolge passen noch 2 Module der bereite Grid 3 daneben.

2 weitere Module sollen aber nebeneinander (jeweils grid 6 ) unter der Nachrichtenliste angezeigt werden. Wie schaffe ich den Umbruch?

Und noch ne Frage:

Ich habe im Layout das Modul Artikel -> Auf der Seite selbst die Newsliste. Gebe ich entweder dem Artikel oder dem Inhaltselement die Gridklasse dann passt es. Gebe ich dem Modul Newslist die gridklasse, dann wird diese nicht übernommen bzw. ignoriert.

[BugBuster]

Zum Umbruch, wenn nichts daneben kommen soll, dann kannste das grid weglassen, dann hat es normalerweise volle Breite.
Oder du packst noch ein Leeres Modul (HTML) mit grid6 daneben.
Für solche Fälle hatte ich mir mal ein grid12 gebastelt mit 1px Höhe, quasi als "clear" Modul.

Die Grid Klassen packst du normalerweise auf die Artikel oder auf die Artikelelemente. Nicht in tiefere Schichten wie Module oder sowas.
Klassen in Module die als Artikel-Element eingebaut werden bringen eh nichts, da gelten die Klassen des Elementes, nicht des Moduls.

[Acta]

Hallo Bugbuster!

Ich habe das nun mittels einem Modul mit Grid 12 gelöst!

Nur mal zum Test ... warum wird die Spalte mit dem RSS Reader nicht rechts daneben angezeigt, obwohl alle Grid 4 haben. Erstaunlich finde ich auch, das Module vom Grid ein 10er margin links und rechts verpasst bekommen, während der artikel ohne auskommt.

[Acta]

Noch etwas was ich nicht verstehe.

Auf der Startseite

Ist im Artikel - das Modul Newslist eingebunden.

Und dort erhält es ein Margin von 10 px links und rechts.

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

Das steht in der Konsole... ein Problem vom Grid?

[Acta]

Hat sich alles erledigt! VIelen Dank!

[Acta]

Es hat sich doch nochmal eine Frage aufgetan:

http://acta-playground.de/liverpool/...e-vereine.html

Unten -> Ich habe via dma_elementgenerator diese Teile erstellt. Jedem wird automatisch grid3 zugewiesen.

Wie bekomme ich jetzt aber hin, dass bei unterschiedlicher länge dennoch eine neue zeile angefangen wird?

[denniserdmann]

Moi Acta,

ich kann dein Problem auf der Seite nicht richtig nachvollziehen, weil bei mir alles korrekt dargestellt wird, aber ich denke du spielst darauf an, dass es bei unterschiedlichen Bogengängen passieren kann, dass dein 4., 7. etc. Element nicht das erste Element in der neuen Zeile ist, oder?

Bildschirmfoto 2015-02-13 um 07.37.35.png

In diesem Fall solltest du dem Grid ein wenig auf die Sprünge helfen, indem du das 4., 7. etc. Element ein clear: both gibst, damit es auf jeden Fall eine neue Zeile beginnt. Ich würde die Elemente .ce_fvereine dafür in ein separaten Container verschieben und dem jeweiligen Element dann über :nth-child{} ein clear: both geben.

.neuer_container div:nth-child(3n+4) {
   clear: both;
}

Wichtig ist, dass .ce_hyperlink und .ce_fvereine nicht direkt nacheinander stehen oder beziehst ce_hyperlink in deine Berechnung mit ein (also 3n + 5)
Habe es jetzt nicht getestet, aber laut dieser Anleitung bei CSS-Tricks sollte das funktionieren.

Grüße,
Dennis

[Acta]

Hey Dennis,

genau vor diesem Problem stande ich. Ich hatte auf eine schönere Lösung gehofft.

Ich hatte gehofft, dass wenn ich z.B. den zweiten Eintrag lösche, automatisch alle nachrutschen. Wenn ich jetzt aber dem vierten Element ein clear:both mitgebe, funktioniert das nachrutschen ja nicht mehr.

Auch ein min-height macht keinen Sinn, da im Responsiv Modus ja die Höhe der einzelnen Elemente geringer wird. Wenn ich dann ein min-height setze, habe ich zuviel leeren Raum.

[Samuell]

Hallo Acta,
ist Dir bewußt, dass wenn Du das 4. Element über nth-child ansprichst und eines löscht, er wieder neu rechnet welches nun das 4. Element ist?
Weiterhin hast Du derzeit einen BreakPoint.
Bei Deinem derzeitigen Layout wäre es also kein Thema ein min-height zu vergeben und dieses ggf. für einen späteren BreakPoint zu ändern.

[denniserdmann]

…
ist Dir bewußt, dass wenn Du das 4. Element über nth-child ansprichst und eines löscht, er wieder neu rechnet welches nun das 4. Element ist?
…

So wie Samuel schreibt, kannst du Dir über nth-child sparen, eine Klasse zu vergeben.

Lies Dir am Besten mal den Artikel von CSS-Tricks durch. Wenn du später mit mehreren Breakpoints arbeitest (also vielleicht auch mal nur 2 Elemente nebeneinander anzeigen willst), dann musst du die Anweisungen für nth-child immer überschreiben, daran führt kein Weg vorbei. Aber immerhin bist du so nicht an die Klassen für ein Element gebunden und kannst beliebig viele Elemente darstellen, die automatisch richtig umgebrochen werden.

Ich hoffe, ich konnte es ein bisschen verständlicher machen.

Grüße,
Dennis