Resp. Boxen und auch noch unterschiedlich viele Spalten

[umwelt]

Hallo,

ich möchte ein auf Boxen basierendes Layout entwerfen, das auch noch responsive ist.
Es handelt sich z. B. über eine Produkt-Übersicht, wo jedes Produkt eine Box mit Titel, Foto, Teaser und Link hat...

also praktisch

Code: Alles auswählen

<div>
<h2>Titel<h2>
<img src... />
Blabla tolles Produkt blubblub
<a href="">Link</a>
</div>

Nun möchte ich, dass das Layout je nach Bildschirmgröße umbricht..
Gehen wir davon aus, dass es 6 Produkte auf der Seite gibt.

Auf großen Displays sollen es 3 Spalten und entsprechend 2 Zeilen geben.
Auf mittleren Displays soll es 2 Spalten und entsprechend 3 Zeilen geben.
Bei kleinen Displays sollen alle Boxen untereinander angezeigt werden.

Das Problem ist, dass die Boxen unterschiedlich hoch sind und mangels Wrapper (der ja bei dieser Art des Layouts schlecht möglich ist) nicht einfach am Elternelement ausgerichtet werden können.

Habt Ihr eine idee, wie ich sowas bewerkstelligen kann? Die Zeit für flexboxen ist wohl immer noch nicht reif...

Wie würdet ihr sowas angehen?

Viele Grüße!

[SloMo]

Vielleicht inspiriert Dich das: https://masonry.desandro.com/

Ansonsten könntest Du auch ganz ohne JS ein Multi-Column DIV nehmen und alle anderen Blöcke als Inline-Blick darin aufnehmen. Die Spaltenzahl könnte per Media-Query an die Bildschirmbreiten angepasst werden. Dann ist die Reihenfolge allerdings etwas strange. Den IE darf man wie immer dabei auch nicht vergessen. Ich bin aber kein HTML/CSS-Experte, insofern ist das nur so ein Gedankengang ohne Gewähr.

[umwelt]

Danke, das sieht interessant aus, ist aber wohl noch nicht genau das, was ich suche!

[Pretender]

So etwas?

@media screen and (max-width: 600px) {