Frage zur Verwendung

[D23]

Hi,

hab mir heute autogrid geholt und experimentiere grad ein bisschen damit rum.
Irgendwie habe ich das Gefühl, dass mir mal jemand so richtig für Doofe die Funktionsweise erklären muss...

Geplanter Aufbau:
Content A (2/3 Breite) | Content B (1/3 Breite)
Beide jeweils gleiche Höhe

Wie muss ich die beiden Inhaltselemente mit dem Grid einstellen, dass die gewünschten Breiten 2/3 und 1/3 auch eingehalten werden?
Das funktioniert irgendwie nur, wenn ich beide auf Manuell schalte. Sobald ich dem zweiten einen Abstand nach links gebe wird das rechte Element total schmal...

[Tim]

Das Displacement Feature ist eine ganz andere Geschichte. Das braucht man nicht für ein normales Grid. Das wirklich nur zum wilden verschieben von Elementen.

So ist dein Aufbau:
Inhaltselement A: Manuell, two_third
Inhaltselement B: Manuell, one_third

fertig

Empfehlenswert ist auch hier die Block-Grid Funktion zu nutzen. Damit werden automatisch clearings ergänzt und ein Wrapper um die Elemente gelegt um fluchtneutral zu bleiben gegenüber elementen ausserhalb des Grids.

[D23]

Hi Tim,

ich hab's nach einigem weiteren Rumprobieren sogar genau so gemacht - klappt dann auch. Man muss sich da mit Versuch & Irrtum wirklich erst reinfuchsen. Wenn man's dann aber mal kapiert hat, flutscht das wunderbar. Allerdings habe ich die Abstände zwischen den einzelnen Elementen dann doch in mein CSS gepackt.

[Tim]

Das Displacement-Feature war ein Wunsch von Thomas , der hat das in einem Theme benötigt.
Generell ne coole Sache. Kann man halt Inhalte beliebig verschieben. Ich nenns gern das Grid-Auflösungs-Feature.

[bibib]

Ich habe auch noch eine Frage zur Anwendung



Möchte folgende Anordnung: Textelement oberhalb Newsletter-Reader, links das Modul Newsletter-Liste.
Ich hab das mit dem AutoGrid Wrapper probiert (Elemente/Einstellungen in rot) - aber so funktioniert's nicht. Die Newsletter-Liste wird unterhalb der anderen beiden Elemente angezeigt.
Wo liegt der Fehler? Ist AutoGrid Wrapper dafür überhaupt vorgesehen?


** Korrektur: Grid-Format im Modul Newsletter-Liste muss 1/5 sein - Tippfehler

[bibib]

Mit dem Block-Grid und folgendem Aufbau scheint es zu funktionieren - jedoch nicht mehr in der Mobilansicht:



Mobil werden die Elemente in derselben Reihenfolge angezeigt, wie sie im Backend erscheinen, also zuerst Block-Grid 1, dann Block-Grid 3, dann Block-Grid 2. Das ist in dem Fall etwas ungünstig, weil der Newsletter-Reader (Block-Grid 2) unterhalb der langen Newsletter-Liste (Block-Grid 1) angezeigt wird. Das findet keiner.
Wie krieg ich denn das hin?

[Tim]

Alles richtig.
Ja, AG löst auf in mobilen Geräten. Im grid.css steht folgendes

/** phones **/
@media only screen and (max-width: 767px) {
.autogrid {width: 100%!important;}
.autogrid.same-height, .autogrid_wrapper.same-height, .autogrid_wrapper .inner.same-height {display: block;}
.border-inner {border-left: 0;}
}

man sieht, für phones ab 767px Breite Bildschirm wird .autogrid auf 100% gesetzt.
Das musst du, wenn dann wieder rauskicken.
Lösch es vielleicht einfach in der grid.css in deinem Autogrid. oder schreib es so

@media only screen and (max-width: 767px) {
.autogrid {width: inherit !important;}
}

[bibib]

Alles richtig.

Ja, aber mit dem AutoGrid-Wrapper funktioniert es bei mir eben NICHT.
Das Modul mit der Newsletter-Liste, das rechts von den beiden anderen Modulen angezeigt werden soll, steht UNTERHALB der beiden anderen Elemente. Die Grafik ist mein Wunschergebnis, aber es tut leider nicht so ...
(Und in der Grafik hat sich ein Schreibfehler eingeschlichen: bei der Newsletter-Liste sollte natürlich stehen: Grid-Format 1/5).

Was könnte ich übersehen haben?

[Tim]

Das baut man anders bzw. die Reihenfolge ist auch nicht gut.
Grids haben eine Leserichtig, so auch Autogrid.

(von oben nach unten wird zu von links nach rechts)

- AutogridWrapper Start: four_fifth
-- Element 1: kein grid
-- Element 2: kein grid
- AutogridWrapper Stop
- Element 3: manuell, one_fifth

Zeig mal das Beispiel online.

[bibib]

Das baut man anders bzw. die Reihenfolge ist auch nicht gut.
Grids haben eine Leserichtig, so auch Autogrid.

(von oben nach unten wird zu von links nach rechts)

- AutogridWrapper Start: four_fifth
-- Element 1: kein grid
-- Element 2: kein grid
- AutogridWrapper Stop
- Element 3: manuell, one_fifth

Zeig mal das Beispiel online.

Genau so wie du das beschrieben hast, hab ich es ja auch aufgebaut.

Online hier: http://www.kommagucken.tippsendesign...-nachlese.html
Bzw. mal die erste Nachricht anklicken.


Hier noch die Ansicht im Backend.

[Tim]

adjust_mobile muss raus, sonst wird das nie was, wenn das Grid für Mobile Geräte in Takt bleiben soll.
Das displacement div ist auch nicht richtig. Steht im AutogridWrapper Start Element etwas in den Margin Einträgen?

Bau mal schnell die Wrapper aus und mach zwei Html Elemente

1. <div class="autogrid four_fifth block">
...
4. </div>
5. Newsletterliste (ohne adjust mobile)



Welche AG Version?

[bibib]

adjust_mobile muss raus, sonst wird das nie was, wenn das Grid für Mobile Geräte in Takt bleiben soll.

Ah okay. Dann hatte ich das völlig falsch interpretiert.

Das displacement div ist auch nicht richtig. Steht im AutogridWrapper Start Element etwas in den Margin Einträgen?

Nein, Einstellungen sind so:

Bau mal schnell die Wrapper aus und mach zwei Html Elemente

1. <div class="autogrid four_fifth block">
...
4. </div>
5. Newsletterliste (ohne adjust mobile)

SO passt es

Welche AG Version?

Version 1.2.2

[Tim]

Ah ok, ja, in 1.2.4 hatte ich ausgebessert, dass das displacement div nicht falsch kein kommt.
Ich bau es mal nach.

[Tim]

Ja, ich denke da passe ich AG an. Die Wrapper-Elemente sollten die Grid-Klasse bekommen, damit diese direkt kleiner werden, nicht ein Div darin.
Ich spiele das mit Thomas mal durch. Aber ich bin auf Deiner Seite

[bibib]

Das klingt gut, danke.