DIA 7 / 2014

CSS3: galería con columnas de misma altura, autoajustable según contenido

Tutorial para crear un diseño de galería con cajas de altura automática y responsive usando FlexBox de CSS3, sin usar Javascript.


Lo normal antes con CSS 2.1 era crear los elementos o cajas con una altura fija. Pero esto tiene varios problemas: El responsive no vale, ya que los elementos al ir teniendo diferentes anchos, la altura también va cambiando. Y siempre dependeríamos del contenido máximo de una caja para insertar la altura sin que se nos desbordara…

Ahora es cuando entra en escena la propiedad FlexBox, para los que no lo conozcáis es un modelo de caja de CSS3 (en 2.1 tenemos principalmente: inline, inline-block, block y table) que permite ajustar los tamaños y la disposición de los elementos “hijos” que se encuentran dentro de un contenedor, de tal manera que tengan dimensiones flexibles para que se ajusten al espacio.

Vamos a crear un típico ejemplo de diseño de galería de cajas con foto, título, descripción y fecha.

Creamos el HTML y CSS de la galería de los elementos con float y sin fijar ninguna altura:

CSS3: galería con columnas de misma altura 01

Podemos ver el típico problema de las cajas que al tener diferentes alturas en función de su contenido se desbordan.

Añadimos las siguientes clases FlexBox al elemento contenedor e hijos:

.gallery {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
.gallery li{
   display: -webkit-flex;
   display: flex;
}

Ahora ya podemos ver el siguiente resultado que buscábamos:

CSS3: galería con columnas de misma altura 02

Ver demo

El objetivo de este tutorial es solo para conocer como conseguir ese efecto de “cajas de misma altura automática” usando Flexbox, con 2 simples líneas CSS, sin usar Javascript.

Jorge Maiden
Jorge Maiden

Desarrollador web nacido en el país llionés hace 34 años. Desde 2004 trabaja de desarrollador web en las disciplinas de diseño, programación y SEO. Actualmente forma parte del equipo web de Awwwards.com