Un layout in stile Pinterest

3 marzo 2014

Il layout del popolare social network Pinterest ha delle peculiarità che hanno immediatamente attirato l’attenzione di designer e sviluppatori, al punto che “layout in stile Pinterest” è diventata l’espressione d’uso più comune per indicare quella specifica soluzione.

Le caratteristiche di un “layout in stile Pinterest”

Ma quali sono le caratteristiche di un “layout in stile Pinterest”? Possiamo così sintetizzarle:

  • un elemento contenitore possibilmente adattabile a diverse risoluzioni di schermo;
  • al suo interno una serie di item ad altezza variabile e non prevedibile in partenza con una struttura identica, con immagini, testo o misti;
  • gli item sono disposti su righe e colonne dinamiche andando a formare una sorta di griglia in cui non vi siano gap irregolari in termini di spazio nella disposizione verticale, ovvero nelle colonne.

In questa breve descrizione il fattore chiave è rappresentato dal riferimento all’altezza variabile e non prevedibile in partenza degli item. Se gli elementi che compongono la griglia, infatti, avessero larghezza e soprattutto altezza fisse, basterebbe organizzare il layout con le tecniche più tradizionali, si tratti dei float o di inline-block, per ottenere il risultato desiderato. Vediamo con un esempio perché i float non funzionano in questo scenario.

Il markup HTML

In tutte le nostre demo useremo un identico markup HTML. Un elemento contenitore racchiude una serie di box con un’immagine e una breve didascalia. Le immagini hanno altezza variabile, fattore che va ad influenzare ovviamente l’altezza dei box stessi.

<div id="container">

  <div class="item">
	<img src="1.jpg" class="scala">
	<div class="titolo"><h6>Item 1</h6></div>
  </div>
  
  <div class="item">
	<img src="2.jpg" class="scala">
	<div class="titolo"><h6>Item 2</h6></div>
  </div>
  
  <div class="item">
	<img src="3.jpg" class="scala">
	<div class="titolo"><h6>Item 3</h6></div>
  </div>
  
  <!-- [...] -->
</div>

Soluzione con i float

Nel CSS della prima demo abbiamo così definito il contenitore e gli item al suo interno, che risultano semplicemente floattati a sinistra:

#container 
{
	padding: 20px;
	max-width: 1350px;
	margin: 0 auto;
}

.item
{
	background: #fefefe;
	border: 2px solid #fafafa;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	width: 250px;
	margin-bottom: 10px;
	margin-right: 10px;
	float: left;
}

L’esito non corrisponde a quanto desideriamo ottenere, è evidente. La griglia è tutto tranne che regolare, si creano spazi tra i box che non è possibile controllare proprio per via dell’altezza variabile degli stessi.

Se vuoi aggiornamenti su Un layout in stile Pinterest inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Un layout in stile Pinterest

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy