nicht angemeldet
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 …
LLAP 🖖
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
Matthias Scharwies