Element-Einträge von oben nach unten und bei Bedarf automatisch mehrspaltig (Grid?)

[Kira]

Hallo Ihrs,

ich möchte ein Grid-Element aufbauen, das die Einträge aber nicht von links nach rechts anordnet und bei Zeilenende eine neue Zeile anfügt, sondern von oben nach unten anordnet und bei Erreichen des unteren Rands des Elements eine neue Spalte anfügt. Die Anzahl der Spalten ist jedoch begrenzt (rechter Bildschirmrand), womit die Spalten ggf. auch nach Erreichen des unteren Rands weitergeführt werden und das ganze Element dann mittels CSS -> overflow:auto gescrollt werden kann.

Beispiel: HTML-Quelltext: <div><span>1</span><span>2</span><span>3</span>...<span>35</span><span>36</span></div>

Ausgabe:

1  13  25
2  14  26
3  15  27
   ...
11 23  36
12 24

Ich habe im Inet recherchiert, aber nur Lösungen gefunden, die entweder zuerst von links nach rechts und dann von oben nach unten platzieren oder jedem Element eine feste Position im Raster zuweisen. Doch mit einem Grid-Element wird es doch bestimmt möglich sein, automatisch wie oben beschrieben zu positionieren.

Grüße Kira

[Rolf B]

Hallo Kira,

du suchst vermutlich grid-auto-flow:column.

Damit musst Du aber die Anzahl der Zeilen festlegen, sonst wird das nichts. Der Auto-Flow Mechanismus des Grid kann meines Wissens nicht sagen: Mach so viele Zeilen (Spalten) bis die Viewporthöhe (-breite) erreicht ist und beginne dann eine neue Spalte (Zeile).

Denkbar wäre, eine Media-Query auf die Viewporthöhe (Container-Query wäre besser, ist aber noch nicht in der Wildnis angekommen) zu machen und je nach Höhe die Anzahl der Grid-Zeilen zu setzen. Das ist aber eine ziemlich bröckelige Sache, weil Du ja nicht weißt, was sonst auf dem Viewport los ist und die verfügbare Höhe für das Grid kaum einschätzen kannst. Das sollte man vermutlich besser über einen resize-Observer steuern.

Deine Anforderung bezüglich des Verhaltens bei "Bildschirm voll" habe ich nicht verstanden. Sollen dann weitere Spalten oder Zeilen entstehen? Mit auto-flow-column würdest Du weitere Spalten erzeugen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

du suchst vermutlich grid-auto-flow:column.

Damit musst Du aber die Anzahl der Zeilen festlegen, sonst wird das nichts. Der Auto-Flow Mechanismus des Grid kann meines Wissens nicht sagen: Mach so viele Zeilen (Spalten) bis die Viewporthöhe (-breite) erreicht ist und beginne dann eine neue Spalte (Zeile).

Hold my beer

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

war lecker.

repeat(auto-fill, 1.5em);

merke ich mir dann vielleich auch irgendwann mal.

Rolf

[Gunnar Bittersmann]

@@Rolf B

war lecker.

He, ich sagte „halten“, nicht „austrinken“!

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo,

war lecker.

He, ich sagte „halten“, nicht „austrinken“!

hehe, ich glaube, ihr würdet euch bei den Schwaben auch über so manche abweichende Deutung einiger Vokabeln wundern. So steht heben in der schwäbischen Umgangssprache nicht für hochheben oder anheben (das wäre lupfen), sondern für halten, festhalten.

Einen schönen Tag noch
 Martin

[Kira]

Hallo Rolf,

Danke für Deine schnelle Atwort.

Das grid-auto-flow:column hat mir schon ein wenig geholfen. Jedoch ist es nur ein winziger Teil der Lösung, denn ich habe keine feste Vorgabe für Anzahl der Zeilen, sondern für die der Spalten (die ich mit einem Media-Query vorgebe). Die Anzahl der Zeile ist nur solange fix, wie der gesamte Platz für alle Einträge ausreicht. Sollte dieser Platz jedoch nicht ausreichen, müssen soviele Zeilen erzeugt werden, dass alle Einträge Platz haben. Die überschüssigen Zeilen sind dann nur mit Scrollen erreichbar, was aber nebensächlich ist.

Weil vielleicht meine Erklärung etwas dusselich war, habe ich zum besseren Verständnis alles Mal bildlich erstellt. In dem Beispielen habe ich jeweils 3 Spalten mit je 5 Zeilen Platz, was aber in der Realität von den Bildschirmmaßen abhängig und dadurch variabel ist. Entscheidend ist das letzte Beispiel, bei dem die 20 Elemente nicht mehr in die maximale Anzahl von Zellen (5 x 3) passen. Dann sollen die Spalten chronologisch fortgeführt werden, bis sie jeweils 1/3 (1 durch Anzahl Spalten) des Gesamtinhalts haben.

Geht so etwas oder muss ich es mittels Script in die jeweiligen Blöcke trennen. Das würde ich gern umgehen, weil es alles andere als eine handicap-freie Lösung ist.

Grüße Kira

[Rolf B]

Hallo Kira,

vielleicht solltest Du kein Grid nehmen, sondern Multicolumn-Layout. Ein einfaches div (oder einen semantischeren Container) und dort die Anzahl der Spalten mittels columns festlegen. Diese Anzahl kannst Du per Mediaquery variieren.

Die Blöcke darin kannst Du mit break-inside:avoid zusammenhalten. Wenn Du sie auf eine feste Höhe zwingst, dürfte es auch ganz ordentlich aussehen. Den Spaltenabstand legst Du mit column-gap fest.

Dann hast Du eine Balancierung.

Rolf

[Gunnar Bittersmann]

@@Kira

Der Sinn erschließt sich mir nicht. Wenn man im letzten Beispiel runtergescrollt hat und bei 7 angekommen ist, muss man wieder hochscrollen, um zur 8 zu kommen. Und bei 14/15 noch mal. Übersichtlich geht anders. Das scheint mir kein gutes Design zu sein.

Anstatt Nutzer wiederholt runter- und hochscrollen zu lassen, warum nicht horizontal? Oder warum nicht

 1   2   3
 4   5   6
 7   8   9
10  11  12
13  14  15
16  17  18
19  20

🖖 Живіть довго і процвітайте