Hallo Linuchs,
sehe ich das richtig, dass Du in einem Kindercartoon, äh, -karton immer links ein Kind sehen willst und rechts dessen Kinder?
Das wäre für den Kinder/Enkel-Bereich eine vertikale Flexbox oder ein Grid mit einer Spalte. Jede Zelle von Flexbox oder Grid steht für ein Kind. Diese Zelle ist wiederum ein Grid mit zwei Spalten und so viel Zeilen, wie es Enkel gibt. Die linke Spalte enthält nur ein Element, das Kind. Mittels align-items:center solltest Du erreichen können, dass das Kind in der Mitte steht. Oder align-items:start, wenn es oben stehen soll.
Wie man den Autofill-Algorithmus für's Grid hier korrekt nutzt, weiß ich nicht aus dem Handgelenk; habe jetzt auch keine Zeit zum Nachschlagen. Es sollte aber möglich sein.
Aber vielleicht möchtest Du links nicht nur das Kind stehen haben, sondern auch dessen Partner? D.h. links müssen ggf. zwei Elemente hin?
Die Alternative zum Grid wäre eine SVG Grafik, in der Du fleißig Rechtecke einsetzt und deren Position Du mit spitzem Javascript-Bleistift ausrechnest.
Möchtest Du auch noch Linien zeichnen, die die Elternschaft oder Geschwisterschaft darstellen? Oder soll das allein durch die Boxen dargestellt werden?
die einzelnen Personen nach ihrem Geburtsjahr eingerückt.
Das kann schiefgehen. Vor allem, wenn generationenübergreifende Partnerschaften geschlossen wurden, wie in der Geschichte, wo jemand eine Frau heiratet, die eine Tochter mit in die Ehe bringt. Und sein Vater heiratet diese Tochter. Auf diese Weise wurde er sein eigener (Stief-)Großvater. Von Extremfällen wie in "All You Zombies" - von Heinlein, nicht den Hooters - will ich gar nicht reden 😉
Rolf
sumpsi - posui - obstruxi