CSS-GRID: vertikal automatische Anordnung unterschiedlich hoher Elemente?

[Rolf B]

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