Galería de elementos desiguales con distribución uniforme puro Css.

Galería de elementos desiguales con distribución uniforme puro Css.

Por Kseso ✎ 9

Cómo solucionar sólo con Css el problema de la distribución homogénea y ocupación de todo el espacio en la vertical de cajas con alturas distintas y desconocidas.

Si tenemos una serie de div´s con una imagen y un texto dentro de un contenedor principal tal que así:

<div id="contenedor"> <div id="columnas"> <div class="unidad"> <img src="pic1.jpg" alt="alt" /> <p>Algo de texto sobre la imagen</p> </div> <!-- Nº indeterminado de cajas--> <div class="unidad"> <img src="img2.jpg" alt="alt" /> <p>Texto relativo y descriptivo de la imagen</p> </div> </div>

La distribución homogénea en la horizontal de elementos no reviste mayor problema. Un simple flotado (declarando anchura) es suficiente. El problema surge cuando se desconoce a priori el contenido y este puede variar. Es entonces cuando surgen los problemas. Debido al flujo de los elementos lo normal es que ocurra lo de la imagen:

Nada encaja. Surgen grandes espacios en blanco entre una fila y la siguiente.

Normalmente la solucción pasa por el uso de javascript, hay librerías propias para ello. Pero a costa de calcular en vivo el tamaño de cada uno de los elementos y posicionarlos de forma absoluta.

El resultado sería el de la imagen de abajo y el que vamos a realizar con puro Css:

Solución Css: La propiedad column

Para lograr lo mismo con puro Css tenemos las propiedades column-Propiedad que declaramos en el div padre y a éste lo colocamos dentro de un contenedor general #contenedor sólo a efectos de dar ciertas medidas. De este último podríamos prescindir.

#contenedor { width: 90%; max-width: 1170px; min-width: 800px; margin: 50px auto; } #columnas { column-count: 5; column-gap: 15px; column-fill: auto; }

column-count indica el número de columnas que se generan. column-gap la separación entre ellas y column-fill la forma como se realiza el llenado de cada una, balanceado o no.

Pero con estas propiedades puede surgir un problema. Que la caja que ocupa la posición inferior de una columna reparta su contenido entre ésta y la siguiente. Cuando es texto, no hay mayor quebranto. Pero si son "unidades" compuestas de varios elementos (como el caso que nos ocupa de una imagen y su texto), quedaría feo.

La propiedad column-break-inside

Para evitar el reparto del contenido de un elemento entre dos columnas hay que declarar la propiedad column-break-inside: avoid. Se declara no en el contenedor que crea las columnas sino en los unidades interiores que se apilan en columnas, junto al resto de propiedades para estilizarlo:

.unidad { column-break-inside: avoid; background: #E9EBED; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px rgba(20,20,20, 0.4); display: inline-block; margin: 0 5px 20px; padding: 10px; }

Con lo anterior casi está, sólo tenemos que forzar a las imágenes para que no rompan la estructura y apariencia. Para ello basta con declararles un tamaño:

.unidad img { width: 100%; }

Recuerda que el % no se calcula sobre el tamaño original de la imagen sino sobre la anchura del div que la contiene

Y es todo lo que se necesita para lograrlo. Puedes ver la demo aquí.

Advertencias

En primer lugar el soporte de los navegadores al grupo de las propiedades de las columnas Css3. En la demo sólo incluyo los prefijos -moz- y -webkit-

Otra cuestión es la uniformidad en la parte inferior de las columnas. No quedan a ras.

Y por último, fjate en la numeración que acompaña a cada texto. La ordenación del flujo del html no es de izquierda a derecha. El flujo es de arriba-izquierda hacia abajo hasta completar la 1ª columna para pasar después a la siguiente.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 9

  1. muy buenos tutoriales, Acabo de encontrar tu web, me la guaro en favoritos :D q estoy aprendiendo CSS.

    Gracias

    virgiliodelavega.com

    ResponderEliminar
  2. Gracias Virgilio.

    Me alegra que te pueda ser de utilidad.

    Un saludo

    ResponderEliminar
  3. Anónimo7/8/12

    Muy lindo todo pero en el explorer no se ve.
    Solamente lo veo ok en el Firefox.

    ResponderEliminar
  4. El sistema me parece una maravilla, pero en Chrome e IE10 me genera un espacio en blanco bajo las columnas. http://oi40.tinypic.com/2r7sx3r.jpg

    Es una lástima, porque si no fuese por esto lo usaría a menudo seguro. Dejo el código en funcionamiento: http://jsfiddle.net/twilvaro/QMscy/. Fíjate que los column-break-inside están comentados. Verás que al descomentarlos y darle a Run aparecerá el espacio vacío al que me refiero.

    Lo dejo por si supieses por alguna casualidad alguna forma de solucionarlo jeje.

    Un saludo!

    ResponderEliminar
    Respuestas
    1. ¿Recuerdas el porqué de los reset css?

      El espacio es un margen. Más adelante si tengo un rato (y me acuerdo) miraría qué lo genera.

      La solución, temporal, se arregla con el típico (y viejo) mini-reset que incluya un margin: 0;


          * {
             margin: 0;
          }


      Un saludo

      Eliminar
  5. Buenas, a mi se me ve bien en todos menos en Firefox que se ve una sola columna.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso.
      Creo que debe ser por alguna colisión de estilos con el tema actual del blog (y su css asociado).
      A ver si tengo un momento y depuro los códigos.

      Un saludo.

      Eliminar
  6. Hola, excelente, pero tengo un problema, el orden de los post se muestran hacia abajo, no habría alguna manera para que orden de los post se muetren de manera horizontal y no vertical??? Saludos!

    ResponderEliminar
    Respuestas
    1. Ese es un aspecto nativo de las columnas css o comportamiento por naturaleza. Y de no haberse producidos cambios en los últimos documentos del consorcio que las desarrolla (hace un tiempo que no sigo su evolución) no se puede cambiar.

      Si quieres evitarlo, puedes recurrir a js (hay librerías como http://masonry.desandro.com/ ) si los "elementos unitarios" tienen alturas desiguales.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap