Contao 3 - Responsive/Grid-System unklar

halli hallo

habe mir heute auch mal das grid von contao 3 angeschaut und werde da nicht wirklich schlau daraus. dazu habe ich mich an das tutorial von nina gehalten.

gemäss kommentare entfällt ja die rechnerei, wenn man das grid kombiniert mit dem layoutbilder.
in meinen layout habe ich also einmal eine spalte links mit 220px getestet, einmal mit spalte rechts mit 220px.

wenn ich nun den raster darüber lege stelle ich fest, dass da nicht wirklich etwas am raster ausgerichtet ist.

bei seitenliste rechts fängt die rechte spalte korrekt an, hat aber gegen aussen keine 10px margin. die mainspalte hingegen beginnt bei 20px. main .inside bekommt hier 10px margin, dann bekommt der inhalt mit .xyz > * nochmals 10px margin.

bei seitenleiste links stimmt irgendwie der content auch nicht wirklich.

auch scheint der header keinen margin zu erhalten, was aber nicht als fehler anzusehen ist.

nun frage ich mich natürlich: muss ich noch etwas spezielles einrichten oder sind da einfach noch fehler im grid?


gruss andi

Im Grid selber ist kein Fehler, das Grid ohne Layout Builder funktioniert einwandfrei.
Mal abgesehen davon, dass ich die Kombination immer noch "seltsam" finde, könnte es dann höchstens sei, dass der Layoutbilder falsch rechnet, aus welchen Gründen auch immer.

weshalb seltsam? wenn man ein klassisches zweispaltenlayout realisieren möchte, die vorteile von einem responsiven grids aber nutzen möchte, ist das doch der sinnvollste weg.

ansonsten müsste man – sofern überhaupt möglich – mit nested grids arbeiten. das würde aber auch bedeuten, dass man zwei artikel nebeneinander stellen
müsste. das wäre dann aber auch nicht mehr im sinne von contao und der inhaltspflege.

was wäre denn dein ansatz?

Das ist aber im Sinne eines Grid Systems, und das Contao Grid ist auch darauf ausgelegt. Meine Contao Seite ist genau so gemacht, wobei ich Prozent Grid verwende.
Die Kombination hat nur einen Vorteil, das man nach wie vor Module ins Layout legen kann und die automatisch auf alles Seiten erscheinen.

Zitat:

---

Zitat von tower

Das Die Responsive Eigenart vom Layout Builder bei <768pixel bekannt ist (nicht bei mir aber ok) zeigt genau was ich meine: Contao ist auch ohne Responsive Grid responsive... sollte es aber nicht sein.

---

Doch doch, sollte es und will es auch. "Responsive Grid" und "responsive" ist nicht dasselbe...

Der "Layout Builder" setzt ab 767px float für alle Layout-Spalten auf none, sodass sie untereinander stehen. Man kann das "responsive" oder "adaptive" oder sonstwie nennen, aber für moderne Layouts ist das absolut sinnvoll. Wenn man das nicht möchte, kann man das in seinen eigenen Stylesheets einfach überschreiben. Einfach hier im Forum danach suchen.

Das "Responsive Grid" ist ein pixelbasiertes, 12-spaltiges Grid-Layout mit vordefinierten Klassen wie "grid1 bis grid12". Dieses Grid-Layout passt sich bei schmaleren Bildschirmen ebenfalls an und wird deshalb als "Responsive Grid" bezeichnet. Man sollte das aber im Seitenlayout nur aktivieren, wenn man tatsächlich mit den Grid-Klassen arbeiten möchte, und nicht, um irgendwas "responsive" zu machen...

Ebenfalls in Contao 3 integriert ist der Meta-Viewport. Wenn man den nicht möchte, kann man ihn im "fe_page"-Template auskommentieren oder löschen.

Zitat:

---

Zitat von BugBuster

Im Grid selber ist kein Fehler, das Grid ohne Layout Builder funktioniert einwandfrei.
Mal abgesehen davon, dass ich die Kombination immer noch "seltsam" finde, könnte es dann höchstens sei, dass der Layoutbilder falsch rechnet, aus welchen Gründen auch immer.

---

da stimme ich dir zu. scheinbar scheint es wirklich der einzig gangbare weg zu sein, die beiden sachen nicht zu vermischen. hatte gestern noch lange ausgetestet, aber da beisst sich definitiv etwas.

habe nun auch umgestellt, die seitenleiste mit einem artikel einzubinden. schade halt, dass man diese dann nicht mehr in der layout-einstellung befüllen kann.


gruss andi

noch was anderes, müsste:

Code:

---

        /**
        * Show all columns underneath each other
        */
        *[class*="grid"],.inside>*[class*="grid"] {
                float:none;
                display:block;
                width:auto;
                margin:0;
        }

---

nicht einen margin: 0 10px; erhalten bei grössen unter 767px? ansonsten sind diese nicht konsistent mit allen anderen elementen, welche keine grid-klasse haben und durch

Code:

---

.mod_article>* {
        margin-left:10px;
        margin-right:10px;
}

---

einen margin haben. aktuell ist es so, dass mit dem einsatz des grids auf kleinen bildschirmen alle elemente mit einer grid-klasse am bildschirmrand kleben, alle anderen elemente jedoch 10px abstand erhalten.


gruss andi

Ich habe die Diskussionen in eigene Threads ausgelagert, damit das ursprüngliche Sammelthread sauber bleibt. Diskussionen also bitte in den jeweiligen Themen. :)

Zitat:

---

Zitat von aportmann

dazu habe ich mich an das tutorial von nina gehalten.

---

Das Tutorial kommt von Leo ;)

Wie ich schon am Camp gesagt habe, will ich in absehbarer Zeit das Thema Grid mal ausführlich beschreiben. Zum Jahresende hin bekomme ich das aber nicht gebacken, da ich jetzt traditionell viel Stress in der Firma habe und obendrauf noch krank geworden bin :(

Zitat:

---

Zitat von aportmann

halli hallo


gemäss kommentare entfällt ja die rechnerei, wenn man das grid kombiniert mit dem layoutbilder.
in meinen layout habe ich also einmal eine spalte links mit 220px getestet, einmal mit spalte rechts mit 220px.


gruss andi

---

Wenn man die Margins mit je 10px dazu rechnet und die Linke Spalte 240px breit macht, stimmt auch das Raster!