Layout Pinterest like con CSS3

fox

6 March 2013 Author

Non molto tempo fa ho trovato uno snippet per realizzare un layout in stile Pinterest che ho implementato subito su un sito su cui sto lavorando. Per stile pinterest intendo un layout basato colonne della stessa larghezza (ma con altezza flessibile) che si susseguono riga per riga, adattandosi le une alle altre a seconda delle diverse altezze a formare un flusso continuo (se non avete capito andatevi a vedere Pinterest). Il risultato finale è bello, e, al contrario dei layout di questo tipo fatti con le librerie javascript, dopo puoi ancora implementare altro javascript senza andare in conflitto.

Avevo in fatti provato a utilizzare isotope e masonry, ma dopo averli installati molte delle modifiche che volevo fare su layout non erano possibli, Cufon, per esempio non si riusciva a implementare.

La soluzione con i Css3 mi è venuta bene principalmente per questo motivo. Ma anche perché è più semplice e light da implementare.

La pecca è che non funziona ugualmente su Internet Explorer, anche se, essendo il risultato ugualmente visibile e usabile, ho deciso di usarlo lo stesso, e poi diciamolo: se usi internet explorer per navigare e non vedi bene i siti web è colpa anche un pò tua no?

Andando al sodo si utilizza un markup semplicissimo:

<div id="contenitore-colonne">
<div class="colonna">
<h3>Titolo 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="colonna">
<h3>Titolo 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="colonna">
<h3>Titolo 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="colonna">
<h3>Titolo 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

cioé un div contenitore #contenitore-colonne che contiene un numero inprecisato di divs  .colonne che saranno le singole colonne. All’interno delle colonne ci può essere sostanzialmente qualsiasi cosa.

Il resto viene fatto dai CSS3 con 3 regole che si applicano sull’elemento contenitore:

   #contenitore-colonne { 
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 4;
    column-gap: 15px;
    column-fill: auto; }

Column-count indica al layout quante colonne devono comparire, in questo caso quattro, di conseguenza le colonne si disporranno su file da quattro occupando tutto lo spazio disponibile dato dall’elemento contenitore (se il contenitore è fluido prendono tutto lo spazio della finestra del browser). Le singole colonne avranno così una larghezza che è un quarto di quella disponibile, al netto di margini e padding.

Se la finestra è piccola come sui dispositivi mobili 4 colonne sono troppe, avranno un largezza che non serve a contenere niente, con l’utilizzo della proprietà @media si può decidere di dare un a sola colonna, per esempio se il dispositivo ha uno schermo di 320px di larghezza (iphone).

@media only screen
and (min-width : 320px)
and (max-width : 480px) {
#maincontent { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1;}

Cambiando poi il numero di colonne e i pixels minimi/massimi si può adattare il layout a tablet smartphones etc. etc.

Qui come l’ho utilizzato io.

Qui l’articolo dove ho trovato lo snippet.

 

CSS3

Comments are closed.