Ankündigung

Einklappen
Keine Ankündigung bisher.

Mehrere Reihen innerhalb einer Autogrid-Vorlage

Einklappen
Dieses Thema ist geschlossen.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mehrere Reihen innerhalb einer Autogrid-Vorlage

    Hallo,

    vielleicht habe ich was übersehen oder einen Denkfehler, aber in euer Eclipse X Demo habt ihr auf der Startseite den Artikel "Text" mit mehreren Autogrid-Vorlagen hintereinander mit jeweils 3 Spalten. Wenn man dort nun die Tablet-Ansicht auf "50% 50%" stellen würde, dann hätte jede zweite Reihe immer nur ein einzelnes Element, da es sich um 3 getrennte Grids handelt.

    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: autogrid_beispiel.PNG
Ansichten: 350
Größe: 89,7 KB
ID: 20373

    Wie bekommt man es hin, dass dort dann keine Lücken entstehen, also man mehrere Reihen innerhalb eines Grids hat?

    Ich habe das auf meiner Seite nämlich auch so ähnlich aufgebaut, nur dass ich "50% 50%" für Tablets gewählt habe. Und das haut dann nicht richtig hin...

    Viele Grüße
    Christoph
    Angehängte Dateien
    Zuletzt geändert von Chris87; 13.09.2020, 23:21.

  • #2
    Mhh... die Frage verstehe ich nicht.

    Wenn es immer 3er Blöcke bleiben sollen, fährt man für jedes Endgerät 33,33,33.

    Selbsterklärend funktioniert in einem gewünschten 33% Grid keine 50% Größen.
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Es sollen auf Desktop 33% 33% 33%, auf Tablet 50% 50% und auf Mobile 100%. Bei der Demo würde das auf dem Tablet dann so aussehen:

      Klicke auf die Grafik für eine vergrößerte Ansicht

Name: autogrid_beispiel2.PNG
Ansichten: 308
Größe: 47,1 KB
ID: 20389

      Hier entsteht dann nach jeder Dritten Spalte eine Lücke. Ich hatte gedacht, man könnte vielleicht alle Spalten innerhalb eines Autogrids anlegen und es würde dann je nach Auflösung korrekt umgebrochen werden. Oder habe ich irgendetwas übersehen und das lässt sich schon lösen?
      Zuletzt geändert von Chris87; 15.09.2020, 01:16.

      Kommentar


      • #4
        Wie soll sich eine 3er Reihe bei einer 50% Darstellung ohne Zeilenumbruch darstellen lassen?
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          Ich nutze momentan zwei 3er Reihen, weil es nicht anders geht. Hätte aber gerne auf dem Desktop zwei 3er Reihen, auf dem Tablet drei 2er Reihen und auf dem Smartphone 6 einzelne Reihen untereinander.

          Ich weiß nicht, ob der Vergleich hinkt, wenn man es mit Bootstrap vergleicht. Aber dort könnte ich alle 6 Spalten in eine Row packen und dann den Spalten die Klassen "col-xl-4 col-md-6 col-sm-12" geben und hätte auf dem Desktop zwei 3er Reihen, auf dem Tablet drei 2er Reihen und auf dem Smartphone nur jeweils 1 Reihe.

          Kommentar


          • #6
            Wie du schon sagt, dafür musst du alle Elemente erstmal in einem Block haben.
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              Aber weitere Spalten kann ich ja nicht hinzufügen, oder? Oder meinst mehrere Elemente untereinander in eine Spalte packen? Das habe ich probiert, aber ich will das alle Elemente immer gleich hoch sind und wenn ich "Gleiche Höhe" beim Autogrid aktiviere, dann sind auf einmal die oberen Elemente viel zu lang und verdrängen die unteren Elemente so weit, dass die nicht mehr komplett angezeigt bzw. abgeschnitten werden zudem stimmt die Reihenfolge dann nicht mehr, sobald die Elemente umgebrochen werden.
              Zuletzt geändert von Chris87; 17.09.2020, 15:10.

              Kommentar


              • #8
                Das wird nicht funktionieren. Gleiche Höhe geht nur innerhalb von abgeschlossenen Reihen, nicht in fortlaufenden umgebrochenen Grids.
                http://www.premium-contao-themes.com

                Kommentar


                • #9
                  Hmm, also lässt sich mein Problem mit dem Autogrid nicht lösen. Finde ich etwas schade, weil eigentlich hätte ich erwatet, dass man auch mehrere Reihen mit unterschiedlichen Einstellungen je nach Endgerät korrekt darstellen kann.
                  Zuletzt geändert von Chris87; 18.09.2020, 12:45.

                  Kommentar


                  • #10
                    Dafür musst du AutoGrid Reihen nutzen. Das geht.
                    Was nicht gehen wird ist mit Zeilenumbrüchen gleiche Höhen generieren. Das geht nur Zeile für Zeile.
                    http://www.premium-contao-themes.com

                    Kommentar


                    • #11
                      Oh, die Autogrid-Reihe ist im Endeffekt genau das, was ich gesucht habe. Aber dort kann man nicht mehrere Inhaltselemente zu einer "Spalte" gruppieren, oder? Also es geht immer nur 1 Element pro Spalte?

                      Kommentar


                      • #12
                        In einem AG Reihen Block kannst du beliebig viele Elemente packen. (gleiche Höhe geht aber nur exakt pro Reihe)
                        http://www.premium-contao-themes.com

                        Kommentar


                        • #13
                          Aber jedes Element stellt dann quasi eine Spalte dar, oder? Ich kann nicht wie bei den Autogrid-Vorlagen mehrere Elemente in eine Spalte packen? Ich hoffe du verstehst, was ich meine.

                          Kommentar


                          • #14
                            Probieren geht über studieren.

                            Eine AG Reihe ist eine CSS-Flex-Reihung. Jedes Element darin fährt die Größe, die es eingestellt hat. Erreicht die prozentualle Weite der fortlaufenden Elemente 100% des verfügbaren Platzes, bricht es um.

                            AG Presets sind CSS-Grid-Blöcke. Diese sind in sich stabil und abgeschlossen. Und erzeugen erstmal keine Umbrüche oder ein loses Grid.
                            http://www.premium-contao-themes.com

                            Kommentar


                            • #15
                              Ich glaube wir reden aneinander vorbei Ich habe das schon alles so hinbekommen, dass es korrekt umbricht.

                              Bei der Autogrid-Vorlage hatte ich in einer einzigen Spalte mehrere Inhaltselemente untereinander. Bei der Autogrid-Reihe wird aber jedes Element als eigene Spalte hinzugefügt.

                              Ist aber nicht super wichtig, also ich kann auch darauf verzichten. Ansonsten läuft es so wie ich es benötige. Danke für deine Geduld
                              Zuletzt geändert von Chris87; 01.10.2020, 14:08.

                              Kommentar

                              Lädt...
                              X