Mehrere Reihen innerhalb einer Autogrid-Vorlage

[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

[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]

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]

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

[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 du schon sagt, daf�r musst du alle Elemente erstmal in einem Block haben.

[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]

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

[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]

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]

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]

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

[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]

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]

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