Hallo Jonathan, die von Dir gezeigten Lösungen finde ich unschön. Grid scheint mir hier der umständlichere Ansatz. Man kann es bändigen, ja, aber es braucht JavaScript für automatische span-Berechnung oder viel Handarbeit. Flexbox mit `flex-flow:column wrap;` ist ein anderer Ansatz, aber DANN muss man die Höhe des Containers begrenzen, damit es zu Spaltenumbrüchen kommt. D.h. man muss erstmal ausrechnen, wie hoch die angezeigten Elemente sind, den Umbruch rechnerisch simulieren und eine Containerhöhe finden, die den gewünschten Umbruch produziert. Einfacher ist es, denke ich, bei column-count zu bleiben und den Kind-Elementen mittels `display:inline-block` oder `break-inside:avoid` das Umbrechen über Spalten abgewöhnen. Das Ergebnis ist aber immer noch ein „flatternder“ unterer Rand. Will man den wegbekommen, braucht man einen Optimierungsalgorithmus, der die Reihenfolge der angezeigten Elemente so optimiert, dass das Flattern minimiert wird (eine Aufgabe mit exponentiellem Rechenaufwand, würde ich annehmen), und dann ggf. noch ein paar Höhen tweakt, um die Unterkante glattzubügeln. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Jonathan, ich denke, dass ein masonry-Effekt etwas anderes ist. Vor allem dann, wenn die anzuordnenden Elemente eine sehr variable Höhe haben. Insbesondere möchte Hugo ja auch ein automatisches span-nen. Grid scheint mir hier nicht der passende Ansatz. Das von Grid vorgegebene Raster verhindert das bündige untereinandersetzen der Inhaltsboxen; man müsste ein Grid mit 4 Spalten und einer Zeile erzeugen und die Inhaltsboxen mit manueller Kontrolle (oder per JS) in die Spalten geben. Mit Autoplacement bekomme ich es auch nicht hin: wenn die Elemente zeilenweise ins Grid verteilt werden, bleibt es bei 4 Spalten und N Zeilen (aber eben im Raster), und bei spaltenweiser Verteilung (grid-auto-flow:row) bleibt es bei einer Zeile und er ergänzt beliebig viele neue Spalten. Die Masonry-Vorschläge mit Grid legen die Anzahl der Zeilen und Spalten sowie den Span der darzustellenden Elemente im Vorhinein fest, und sind darauf angewiesen, dass die Anzah der benötigten Grid-Zellen zur Anzahl der verfügbaren Gridzellen passt. Flexbox mit `flex-flow:column wrap;` ist ein anderer Ansatz, aber DANN muss man die Höhe des Containers begrenzen, damit es zu Spaltenumbrüchen kommt. D.h. man muss erstmal ausrechnen, wie hoch die angezeigten Elemente sind, den Umbruch rechnerisch simulieren und eine Containerhöhe finden, die den gewünschten Umbruch produziert. Einfacher ist es, denke ich, bei column-count zu bleiben und den Kind-Elementen mittels `display:inline-block` oder `break-inside:avoid` das Umbrechen über Spalten abgewöhnen. Das Ergebnis ist allerdings ein „flatternder“ unterer Rand. Will man den wegbekommen, braucht man einen Optimierungsalgorithmus, der die Reihenfolge der angezeigten Elemente so optimiert, dass das Flattern minimiert wird (eine Aufgabe mit exponentiellem Rechenaufwand, würde ich annehmen), und dann ggf. noch ein paar Höhen tweakt, um die Unterkante glattzubügeln. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Jonathan, ich denke, dass ein masonry-Effekt etwas anderes ist. Vor allem dann, wenn die anzuordnenden Elemente eine sehr variable Höhe haben. Insbesondere möchte Hugo ja auch ein automatisches span-nen. Grid scheint mir hier nicht der passende Ansatz. Das von Grid vorgegebene Raster verhindert das bündige untereinandersetzen der Inhaltsboxen; man müsste ein Grid mit 4 Spalten und einer Zeile erzeugen und die Inhaltsboxen mit manueller Kontrolle (oder per JS) in die Spalten geben. Mit Autoplacement bekomme ich es auch nicht hin: wenn die Elemente zeilenweise ins Grid verteilt werden, bleibt es bei 4 Spalten und N Zeilen (aber eben im Raster), und bei spaltenweiser Verteilung (grid-auto-flow:row) bleibt es bei einer Zeile und er ergänzt beliebig viele neue Spalten. D Flexbox mit `flex-flow:column wrap;` ist ein anderer Ansatz, aber DANN muss man die Höhe des Containers begrenzen, damit es zu Spaltenumbrüchen kommt. D.h. man muss erstmal ausrechnen, wie hoch die angezeigten Elemente sind, den Umbruch rechnerisch simulieren und eine Containerhöhe finden, die den gewünschten Umbruch produziert. Einfacher ist es, denke ich, bei column-count zu bleiben und den Kind-Elementen mittels `display:inline-block` oder `break-inside:avoid` das Umbrechen über Spalten abgewöhnen. Das Ergebnis ist allerdings ein „flatternder“ unterer Rand. Will man den wegbekommen, braucht man einen Optimierungsalgorithmus, der die Reihenfolge der angezeigten Elemente so optimiert, dass das Flattern minimiert wird (eine Aufgabe mit exponentiellem Rechenaufwand, würde ich annehmen), und dann ggf. noch ein paar Höhen tweakt, um die Unterkante glattzubügeln. _Rolf_ -- sumpsi - posui - obstruxi