Soluzione layout CSS

[Qwerty71_rsm]

Buonasera,
volevo chiedere a voi se esiste la possibilità di realizzare un layout come quello mostrato in figura con dei contenitori div.

[rewrew999]

I box hanno tutti un'altezza casuale? O la colonna centrale ha box tutti uguali?
Le colonne sono sempre 5 o dipendono dalla larghezza dello schermo?

[Qwerty71_rsm]

I box hanno tutti un'altezza casuale? O la colonna centrale ha box tutti uguali?
Le colonne sono sempre 5 o dipendono dalla larghezza dello schermo?
Il problema sta proprio nel fatto che i box hanno tutti altezza casuale.
Mentre per quanto riguarda il numero per riga entrambe le soluzioni possono andare bene.
Hai idee? :confused:

[rewrew999]

Se puoi anche definire la struttura contenitore puoi provare così, solo CSS non mi viene in mente nulla (Lo script js serve solo per generare a runtime i box, giusto per non scriverli a mano :asd:): http://codepen.io/rewrew/pen/ZWeQGq

Crei 5 colonne "div", classe "col" e id "#colN". In ogni colonna inserisci altri "div" con classe "box".


#container
---- #col1.col
-------- .box
-------- .box
-------- .box
---- #col2.col
-------- .box
-------- .box
-------- .box
-------- .box
-------- .box
---- #col3.col
-------- .box
-------- .box
---- #col4.col
-------- .box
-------- .box
-------- .box
---- #col5.col
-------- .box
-------- .box



La struttura funziona ma è non è responsive, l'unica soluzione che mi viene in mente per renderla usabile su tablet e mobile è utilizzare uno script js che si occupa definire il numero di colonne e redistribuisce i box a seconda della dimensione della finestra.

Se invece ti può andare bene una griglia con box ad altezza identica (tutti alti come il box più alto), puoi usare i flex-box. Solo CSS e nessun contenitore html (ma ancora non molto supportato dai browser): https://developer.mozilla.org/it/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

[Qwerty71_rsm]

Grazie mille a tutti, domani faccio delle prove e vi tengo aggiornati! :)