Problem mit flexibler/responsiver Positionierung

[marc]

Ich habe eine Seite mit zwölf quadratischen Elementen (mit fester Größe, und festen Zwischenabständen (horizontal und vertikal) zueinander), die in zwei Reihen (à sechs Elemente) und als Ganzes zentriert dargestellt werden sollen, solange die Viewport-Breite das zulässt. Wenn der Platz in der Horizontale nicht ausreicht, sollen sie in drei Reihen à vier Elemente (und wieder als Ganzes zentriert) dargestellt werden. Beziehungsweise in vier Reihen à drei Elemente, sechs Reihen à zwei Elemente oder zwölf Reihen à ein Element bei noch schmaleren Viewport-Breiten.

Ich habe mich einen Teil des Weges angenähert, aber zum oben beschriebenem Ergebnis komme ich einfach nicht und der Code, den ich verwendet hab, ist auch nicht sehr elegant und enthält veraltete Attribute. Ich hoffe, dass mir hier jemand helfen kann, der mehr von Positionierung versteht.

[Matthias Scharwies]

Servus!

Ich habe eine Seite mit zwölf quadratischen Elementen (mit fester Größe, und festen Zwischenabständen (horizontal und vertikal) zueinander), ... und der Code, den ich verwendet hab, ist auch nicht sehr elegant und enthält veraltete Attribute. Ich hoffe, dass mir hier jemand helfen kann, der mehr von Positionierung versteht.

Gerne, aber dafür bräuchten wir den Code, optimalerweise irgendwo online!

Matthias Scharwies

[Gunnar Bittersmann]

@@marc

Ich habe eine Seite mit zwölf quadratischen Elementen (mit fester Größe, und festen Zwischenabständen (horizontal und vertikal) zueinander), die in zwei Reihen (à sechs Elemente) und als Ganzes zentriert dargestellt werden sollen, solange die Viewport-Breite das zulässt. Wenn der Platz in der Horizontale nicht ausreicht, sollen sie in drei Reihen à vier Elemente (und wieder als Ganzes zentriert) dargestellt werden. Beziehungsweise in vier Reihen à drei Elemente, sechs Reihen à zwei Elemente oder zwölf Reihen à ein Element bei noch schmaleren Viewport-Breiten.

Anderesrum denken: Vom Kleinen zum Großen (mobile first).

Du hast ein Containerelement (ul), das horizontal zentriert ist, also margin: auto.

In diesem hast du Elemente mit festen Breiten, Höhen (bspw. 8em) und Abständen (bspw. 1em), die floaten (wenn nicht gar Flexbox verwendet wird).

Die Breite des Containers wird auf diese Breite plus linken und rechten Abstand begrenzt (hier also 10em).

Wenn nun 2 Spalten nebeneinander passen (bei einer Viewportbreite von 20em oder etwas mehr, wenn außenrum um das Containerelement noch Abstand sein soll), wird ein Breakpoint gesetzt und die Breite des Containerelements auf das Doppelte gesetzt.

Wenn 3 Spalten nebeneinander passen …

Wenn 4 Spalten nebeneinander passen …

Wenn 6 Spalten nebeneinander passen …

Sieht dann so aus.

LLAP 🖖

[marc]

Vielen Dank! Das ist genau die Lösung, die ich gebraucht habe.