Diseño al estilo de Pinterest sólo con columnas CSS

Si has visto pinterest, que cuenta con una interfaz multi-columna para mostrar las imágenes muy bien, incluso si no son de la misma altura. Lo hacen mediante el uso de javascript para calcular la altura de cada columna y luego colocándolos con posición absoluta. Podemos lograr esto mismo con CSS y se puede hacer de dos maneras:

• Utilizando Float: podemos utilizar float pero solamente si todas las columnas tiene la misma altura, de lo contraria tendremos huecos por todos las partes
• Utilizando CSS3: este es lo que tenemos que utililzar y que explicaremos abajo.

Esta técnica es creada originalmente por pixleight y modificada un poco por cssdeck para que se vea y funcione mucho mejor. He aquí una cita de la creación original de cómo se hace.

</pre>
<div id="columns">
<div class="pin"><img src="http://placekitten.com/400/300" alt="PlaceKitten" />

Jean shorts street art flexitarian ...</div>
<div class="pin"><img src="http://placekitten.com/g/400/300" alt="PlaceKitten" />

Leggings pour-over banksy, DIY wolf tattooed ...</div>
<div class="pin"><img src="http://placekitten.com/500/450" alt="PlaceKitten" />

Put a bird on it viral wolf, 3 wolf moon ...</div>
<!-- and so on ...  --></div>
<pre>

Los estilos CSS son:

#columns {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.pin {
	-moz-column-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	column-break-inside: avoid;
	display: inline-block;
	margin: 0 2px 15px;
	padding: 15px;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	background: #FEFEFE;
	background-image: linear-gradient(45deg, #FFF, #F9F9F9);
}

Como puedes ver utilizar [highlight]colum-count: 3;[/highlight] en #columns para contar las columnas que utiliza (en este ejemplo son 3). Despues añade [highlight]column-break-inside: avoid;[/highlight] a la clase “pin” para evitar que fluya de una columna a la siguiente (detalles) obligando a que el contenido esté en una sola columna. Además debe de incluir los prefijos -moz y -webkit para los navegadores, [highlight]-moz-column-break-inside: avoid;[/highlight] [highlight] -webkit-column-break-inside: avoid;[/highlight] Se pueden ajustar el número de columnas dependiendo de la anchura del navegador

@media all and (min-width: 960px) {
   #columns {
      column-count: 4;
      }
}
@media all and (min-width: 1170px) {
   #columns {
      column-count: 5;
      }
}

Ver ejemplo funcionando

Esto no funciona con Internet Explorer 9 ni versiones anteriores. Puedes estudir el código fuente del ejemplo y probar como funciona.