Grid-Problem: vertikale Trennlinie mittig zwischen zwei Grids (via CSS) nicht möglich

Es ist nicht möglich, zwischen zwei Grids mittig per CSS eine vertikale Trennlinie anzubringen.

Die Ursache liegt darin, dass die Grids via Margin-Anweisungen voneinander getrennt werden und die Border-Anweisung aber entsprechend dem Boxmodell zwischen Padding + Margin liegt. Eine Border würde daher immer an einem Grid ankleben. Versucht man sie mittels dem Padding davon wegzuschieben und den Abstand hinzufaken, muss man 1. immer die doppelte Margin-Breite als Padding vergeben und zweitens würde das Grid kollabieren, da sich die Breite des Paddings und der Border zur Gesamtbreite dazu addiert.

Hat jemand eine Idee wie/ob dieses Problem eim aktuellen Contao 3 Grid lösbar ist? Vor allem unter Beachtung der Tatsache, dass das dann auch in kleineren Auflösungen auch noch funktionieren sollte?

Ich habe es mal mit Bildern (über die gesamte Artikelbreite) hingefaked, die ich dann für jede der Auflösungsstufen erneut bauen musste, aber das ist absurd, weil total umständlich und unflexibel.

Du könntest Grid und Holy Grail zusammen verwenden!

Eine weitere Möglichkeit währe eine Artikel zu erstellen, dem das Grid für die entsprechende Breite zu geben und darin die anderen Grids (HTML) und eigene Layoutbereiche zu platzieren.
Das sollte sogar, vielleicht mit kleineren Anpassungen, mit den unterschiedlichen Viewports funktionieren.

Ich bastel gerade an einem Grid & Holy Grail -Layout, da habe ich das so ähnlich gemacht. Habe anstatt Grid für den Artikel einfach nur die Spalte angegeben und ein HTML-Modul platziert.
Vielleicht hilft Dir diese Lösung ja weiter. ;)

Das margin für [class*="grid"] bzw. .mod_article > * gegen padding austauschen / überschreiben. So ließe sich ein background-image an den Rand positionieren.

Zitat:

---

Zitat von Nina

Es ist nicht möglich, zwischen zwei Grids mittig per CSS eine vertikale Trennlinie anzubringen.

Die Ursache liegt darin, dass die Grids via Margin-Anweisungen voneinander getrennt werden und die Border-Anweisung aber entsprechend dem Boxmodell zwischen Padding + Margin liegt. Eine Border würde daher immer an einem Grid ankleben. Versucht man sie mittels dem Padding davon wegzuschieben und den Abstand hinzufaken, muss man 1. immer die doppelte Margin-Breite als Padding vergeben und zweitens würde das Grid kollabieren, da sich die Breite des Paddings und der Border zur Gesamtbreite dazu addiert.

Hat jemand eine Idee wie/ob dieses Problem eim aktuellen Contao 3 Grid lösbar ist? Vor allem unter Beachtung der Tatsache, dass das dann auch in kleineren Auflösungen auch noch funktionieren sollte?

Ich habe es mal mit Bildern (über die gesamte Artikelbreite) hingefaked, die ich dann für jede der Auflösungsstufen erneut bauen musste, aber das ist absurd, weil total umständlich und unflexibel.

---

Hallo Nina
Ich arbeite mich gerade in Contao 3.0.1 ein. Seit Jahren bin ich ein Fan von Dirks Jesse YAML CSS Framwork. Dieses benutze ich nun auch bei Contao 3.0.1 (YAML 4.0.2), ohne Erweiterung! Ich habe einfach das fe_page.html5 angepasst. Ich kann nun hier auch vertikale Trennlinien zwischen den Spalten anbringen, alles nach Wunsch mit entsprechenden CSS-Klassen. siehe meine Contao 3.0.1 Test Webseite http://gkammermann.ch/contao_301_000...artikel-3.html. YAML ist einfach eine feine Sache. Für mich das Beste und bewährteste.
Gruss pumukel