Merida Design Blog

Publicado el | Tutoriales / ,

Galería estilo Pinterest con CSS

Desde su aparición, la interfaz de Pinterest ha sido inspiración para muchos sitios y aplicaciones, y es que la distribución verticalmente asimétrica de los elementos de su galería, le dieron una imagen fresca y divertida, saliéndose del esquema cuadrado de las galerías normales.

Con CSS es posible lograr la misma distribución, aunque con una gran diferencia; los elementos quedan ordenados verticalmente y luego hacia la derecha por columnas, y este orden va en contra de como leemos en la pantalla, es decir, de izquierda a derecha y de arriba hacia abajo (Patrón F).

Esto hace que la solución no sea adecuada para contenidos cuyo orden cronológico es importante para la experiencia de usuario, como lo sería cualquier blog, sin embargo, para portafolios de fotografías donde el orden no tiene importancia, esta podría ser una solución viable.


column-width

La propiedad column-width se asigna al elemento que contendrá las columnas, y determina el ancho mínimo de cada una. Con esta propiedad, el navegador intentará llenar el espacio disponible con columnas de ese tamaño, o en su defecto, estirar las columnas hasta ocupar todo el espacio.

Esto quiere decir, que si tenemos columnas de 200px en un espacio de 600px el resultado serán 3 columnas, pero si el espacio disponible es de 500px, el resultado serán 2 columnas de 250px para llenar el espacio disponible.

Con esta propiedad no es necesario definir @media queries, ya que el número de columnas se ajustará automáticamente en base al espacio disponible.


column-count

Como alternativa a la propiedad anterior, column-count como su nombre lo indica, determina el número de columnas en las que serán distribuidos los elementos sin importar el espacio disponible, es decir, se distribuyen los espacios de manera uniforme por porcentajes.

La desventaja es que con esta propiedad es necesario definir @media queries para cambiar el número de columnas en base al ancho de pantalla.


column-gap

La propiedad column-gap, determina el espacio de separación entre cada columna. Si no se define la propiedad, por defecto se colocará el espacio equivalente a 1em.


Teniendo en cuenta las propiedades anteriores podemos crear el grid de la siguiente forma:

...
<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
ul {
    column-width: 150px;
    column-gap: 10px;
    list-style: none;
    margin: 1em auto;
    max-width: 800px;
    padding: 0;
    width: 100%;
    ...
}

...

Nota: Estoy omitiendo muchos estilos que dan como resultado la apariencia final en la imagen por brevedad, al final del artículo puedes ver el código completo en el demo.

Asumiendo que en total son 13 elementos y que cada uno tiene alturas diferentes, el resultado sería algo como la siguiente imagen:

image-1-1

Como se puede apreciar hemos conseguido el efecto, al menos en parte. Los elementos 4, 7 y 10 se cortan entre columnas, ya que ésta es la forma natural en que se comportan las columnas, si el contenido fuera texto, éste resultado sería el deseado, sin embargo, no en este caso.

Para corregir este problema debemos asignar una propiedad adicional a los elementos de la lista que le indique al navegador que su contenido debe permanecer en una pieza y no separado en partes, veamos el código:

ul { ... }

li {
    -webkit-column-break-inside: avoid;
}

El resultado sería algo como esto:

image-2


En el siguiente demo puedes ver el código completo:

See the Pen Pinterest Like CSS Grid by Iván Villamil (@ivillamil) on CodePen.15465

Las pestañas de Jade y SCSS son pre-procesadores de HTML y CSS respectivamente, para ver el código resultante correspondiente, solo presiona el botón que aparece en la parte inferior derecha “View Compiled”.


Conclusión

Como puedes observar, el orden de los elementos no es el adecuado para contenido cuyo orden cronológico es importante, pero se puede aplicar a la perfección en galerías fotográficas o portafolios.

Si tienes alguna duda o sugerencia, compártela a través de los comentarios.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: