Mehrere Reihen innerhalb einer Autogrid-Vorlage

[Chris87]

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

[Tim]

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.

[Chris87]

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.

[Tim]

In einem AG Reihen Block kannst du beliebig viele Elemente packen. (gleiche Höhe geht aber nur exakt pro Reihe)

[Chris87]

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?

[Tim]

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.

[Chris87]

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.

[Tim]

Das wird nicht funktionieren. Gleiche Höhe geht nur innerhalb von abgeschlossenen Reihen, nicht in fortlaufenden umgebrochenen Grids.

[Chris87]

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.

[Tim]

Wie du schon sagt, dafür musst du alle Elemente erstmal in einem Block haben.

[Chris87]

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.

[Tim]

Wie soll sich eine 3er Reihe bei einer 50% Darstellung ohne Zeilenumbruch darstellen lassen?

[Chris87]

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:



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?

[Tim]

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.

[Chris87]

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.



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