CSS-GRID: vertikal automatische Anordnung unterschiedlich hoher Elemente?

[Hugo]

Hallo,

Versuche, column-count in display: grid zu reproduzieren, um folgenden Effekt zu erreichen:

CSS DEMO (UIDHTML): How to arrange different size images in Gallery only by CSS

[Link zu einem YouTube Video]

... dass sich die Elemente vertikal sozusagen aneinander "schmiegen". Geht dies mit css-Grid auch OHNE explizite Angabe, von wo bis wohin ein Element vertikal spanen soll (also sozusagen "automatisch" - entsprechend der Höhe des Elements)? (Problem mit column-count ist unter anderem dass die Inhalte aufgebrochen werden - z.B. bei divs unpassender Anzahl wird das vertikal letzte div in zweiter Spalte fortgeführt - das ist was ich NICHT will)

Vielen Dank, lieben!

Hugo

[Jonathan Harker]

Hallo Hugo,

Hallo,

Versuche, column-count in display: grid zu reproduzieren, um folgenden Effekt zu erreichen:

CSS DEMO (UIDHTML): How to arrange different size images in Gallery only by CSS

[Link zu einem YouTube Video]

Das Video heißt Masonry Effect. Ich habe das mal mit Grid kombiniert und folgende Links gefnden:

• https://w3bits.com/css-grid-masonry/
• Da gibt's sogar nen Generator: CSS Masonry Generator
• MDN: CSS_Grid_Layout/Masonry_Layout (hinter einem flag versteckt -nicht für Produktiveinsatz!)
• sitepoint: Understanding Masonry Layout

Bis bald! Jonathan

[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

[Gunnar Bittersmann]

@@Jonathan Harker

[Link zu einem YouTube Video]

Das Video heißt Masonry Effect.

Das steht da oben drüber, aber zu unrecht. Es ist nicht masonry.

Hier mal zum Vergleich:

• nicht masonry, sondern multi-column layout (wie im Video gemacht)

vs.

• masonry mit CSS Grid (nur im Firefox mit gesetztem Flag)

• masonry (mit JavaScript)

😷 LLAP

[MrMurphy]

Du hast leider nicht geschrieben was du überhaupt erreichen willst.

In dem Video geht es nur um Bilder, du schreibst jedoch von div, die ungewollt in der zweiten Spalte fortgeführt werden.

Wenn es um Bilder mit einem zugehörigen kurzen Text geht sehe ich zunächst kein div-Element, sondern figure und figcaption. Die Gestaltung dann mit reinem CSS.

Entweder mit column-count oder CSS-Grid, wobei ich selbst CSS-Grid bevorzuge.

Was sinnvoller ist lässt sich aber erst beurteilen, wenn du ein hinreichendes Beispiel deines Quelltextes zeigst. Bei Bildern ist auch deren Größe wichtig. Am besten wäre ein Online-Beispiel.

[Rolf B]

Hallo MrMurphy,

ja, Hugo hat mehrere Probleme. Div-Suppe statt semantisch korrektem Markup ist eins davon.

Das Innenleben eines Elements, das in einem Container mit Spalten steht, wird vom Browser aber gnadenlos auf 2 Spalten verteilt, wenn man das nicht aktiv verhindert. Auch eine figure mit img und figcaption.

Wenn Hugo nicht wusste, dass man den Umbruch innerhalb eines Elements mit break-inside:avoid verhindern kann, erklärt das schon seine Suche nach einem anderen Ansatz.

Mal schauen, ob er sich nochmal meldet.

Rolf