Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Cómo hacer una galería responsive estilo Pinterest con HTML y CSS (sin JavaScript)

En este tutorial vamos a aprender cómo hacer, de una forma muy sencilla y solo con HTML y CSS, una galería de imágenes responsive (o una galería de cualquier otro elemento) al estilo Pinterest. Esto es, tenemos imágenes de distinto tamaño que no se alinean horizontalmente, sino verticalmente en columnas.

Nota: Aunque a día de hoy puedes seguir usando esta técnica, te recomiendo hacerlo con CSS Grid-Layout. Te resultará más fácil y tendrás mucho más control sobre la maquetación. Y si aún no "controlas" CSS Grid, ya estás tardando en hacerte este curso. ;-)

Doy por hecho que sabes qué es Pinterest ¿no? Pinterest es un sitio/plataforma/red social donde se pueden compartir imágenes de forma sencilla y clasificarlas en forma de tableros, como si fueran los típicos tableros de corcho donde se sujetan cosas importantes. A la acción de subir una imagen a Pinterest se la conoce como pinear (de pin, alfiler en inglés).

Pinterest se lanzó en 2010, y sorprendió no solo por la rápida popularidad que adquirió, sino también por la peculiar forma de disponer las imágenes pineadas.

Realmente no inventaron nada nuevo, pero sí que lo popularizaron. Esta técnica era una tendencia que ya se venía usando de forma experimental entre diseñadores y desarrolladores front usando una biblioteca de jQuery llamada Masonry, aunque con resultados discretos.

El gran mérito de Pinterest es ser el primer sitio mainstream en implementar con éxito esta peculiar interfaz, y, por tanto, popularizarla (valga la redundancia). El diseño de la interfaz se ha ido mejorando con el tiempo, pero su esencia permanece:

Offtopic: Efectivamente, te has dado cuenta, el logo de Pinterest no siempre ha sido rojo. Mira por dónde, hoy aprendes dos cosas por el precio de una. :-D

Por aquel entonces esta presentación solo se podía conseguir con JavaScript, y la manera más sencilla era tirando de jQuery y la anteriormente mencionada biblioteca Masonry, llamado así porque los elementos se apilan de forma similar a los ladrillos de un muro, pero en vertical.

Su funcionamiento a grandes rasgos era así: los elementos de la galería se flotaban y Masonry se encargaba de buscarles el hueco que mejor le encajaba por su tamaño, independientemente del flujo del documento.

Construyendo nuestra galería estilo Pinterest sólo con HTML y CSS

Para este ejemplo voy a usar imágenes de libros y cursos de programación de campusMVP para nuestra lista de elementos de la galería:

Los productos están envueltos por un contenedor <section> centrado y con un ancho máximo de 960px, y que tiene dentro el <h1> que da título a la página. Cada ítem de producto consta de una imagen y el nombre del curso, siguiendo esta estructura:

<section id="galeria">
<header>
    <h1>Cursos y libros de campusMVP</h1>
</header>
<article>
    <a href="https://www.campusmvp.es/catalogo/Product-Desarrollo-de-aplicaciones-web-con-Angular-7_232.aspx" target="_blank">
    <figure>
        <img src="imagenes/curso-angular.jpg" /> <figcaption>Curso online de Angular</figcaption>
    </figure>
    </a>
</article>

<!-- [...] Aquí se irían repitiendo más elementos <article> con cursos-->

</section>

Y ahora es cuando se va a producir la magia de CSS: con solo una propiedad todo va a cambiar. Nada nuevo por cierto, esta técnica es un viejo conocido que ya hemos tratado en este blog. Se trata de la multicolumna, en este caso indicaremos con la propiedad column-count que los contenidos se repartan en 3 columnas:

#galeria {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            column-count: 3;
        }
     

Hemos elegido 3 pero podríamos probar con otros valores. Realmente me parece maravilloso el poder cambiar de una sola columna a varias de una forma tan sencilla, únicamente cambiando el valor de una propiedad estándar:

Ahora toca corregir un par de detalles, como el que el título queda demasiado apretado en una sola columna, o que el contenido de los elementos se corta al pasar de una columna a otra:

El título lo vamos a extender a todas las columnas con estas reglas:


-webkit-column-span:all;
column-span:all;

En este caso le indicamos el valor all para que se expanda sobre todas las columnas, pero podríamos poner simplemente el número de columnas sobre las que queremos que se expanda.

Ojo: En Firefox esta regla no funciona, ni siquiera con el prefijo -moz. Las alternativas son, o bien posicionarlo en absoluto, o bien directamente dejarlo fuera del contenedor que vamos a dividir en columnas.

Y para evitar que se nos corten elementos al cambiar de columna usaremos esto:

break-inside: avoid;
page-break-inside: avoid;

La propiedad original de CSS2 es page-break-inside, que nació para ser usada en las hojas de estilos de impresión. Esta regla evita que, al imprimir una web, al cambiar de página se corten ciertos elementos que nos pueda interesar (por ejemplo, tablas con datos).

Esta propiedad luego ha evolucionado en CSS3 a break-inside: avoid; pensando en utilizarla también en presentaciones en pantalla para los casos como este, en los que se use la multicolumna.

Recuerda que también podríamos poner un filete (una línea) en el espacio entre columnas para separarlas mejor:

-moz-column-rule: 1px solid #bbb;
-webkit-column-rule: 1px solid #bbb;
column-rule: 1px solid #bbb;

Pero en este caso no lo voy a usar, ya que considero que es más adecuado para contenidos donde predomine el texto. No obstante, dejaré las reglas comentadas en el ejemplo descargable que encontrarás al final del post por si las quieres probar.

Hacemos responsive nuestra galería de imágenes 

Y ya lo tenemos, sólo nos faltaría ajustar a nuestro gusto el número de columnas en el comportamiento responsive de la galería, usando las media queries que necesitemos. En este caso las he reducido a 2 columnas para tablets y 1 columna en móviles (más o menos).

/* Móviles en horizontal o tablets en vertical */

@media (max-width: 767px) { 
    #galeria {
        columns:2;
    }

}
        
/* Móviles en vertical */

@media (max-width: 480px) {
    #galeria {
        columns: 1;
    }
}

Y ahora sí, lo tenemos listo. Le he añadido un pequeño efecto de opacidad al pasar el cursor sobre los elementos por motivos estéticos, pero no es necesario usarlo. Puedes descargarte el ejemplo desde aquí.

Pablo Iglesias Pablo Iglesias es diseñador Web. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (10) -

Gracias!

Responder

Pablo Iglesias
Pablo Iglesias

Gracias a ti por leerlo. Espero que te haya resultado útil. ^_^'

Responder

victor valor
victor valor

Genial, que bueno

Responder

Muchas gracias por el aporte

Responder

GRACIAS!!!

Responder

Gracias por elñ articulo....muy de ayuda....pero tengo un pequeño problema....Cuando coloco fotos que estan sacadas en vertical, en su formato original, al colocarlas en la galeria, estas toman la forma horizontal, con lo cual me quedan rotadas. Hay alguna propiedad adicional que pueda agregar al css que fuerze que mi imagen este vertical cuando sea el caso. Probe con "transform:rotate(-90deg)" , pero me gira la imagen y se sobrepone con otras imagenes.
Gracias por tu comentario de antemano.
Saludos

Responder

Pablo Iglesias
Pablo Iglesias

Hola Peter,

Tiene pinta de que la imagen en realidad es horizontal pero que se rota a través de la información EXIF, esto hace que en algunos programas la veas bien y en el navegador no.

Puedes probar a aplicarle en CSS "image-orientation: none;" que es una propiedad pensada precisamente para que el navegador use los datos EXIF para orientar la imagen, lo malo es que su soporte no es muy bueno (https://caniuse.com/#feat=css-image-orientation).

Verifica en qué navegadores te ocurre y si esto te lo soluciona.

Otra opción, y que quizá sea la más segura, es girar la imagen en un programa de edición de imágenes para sobreescribir o borrar los datos EXIF originales. Mismamente con Squoosh podrías hacerlo https://squoosh.app.

Si tienes que girar muchas imágenes, podrías hacerlo con una acción de Photoshop. Si no, creo que con Irfanview también lo puedes hacer bastante fácil (https://www.irfanview.com/) y además es gratuito.

Espero que te sirva alguna de estas soluciones.

Responder

Tengo una duda, espero pueda solucionar

Quise agregar otro section de la misma manera, pero cuando lo quise hacer
El contenido se me fue directamente con el footer.
No sé que podría hacer para que funcionara de esa manera.

Espero su respuesta.

Responder

Hola Pablo me parecio excelente tu explicación y el ejemplo!!!! Muy valorado. Ahora te quisiera hacer la siguiente pregunta, en tu ejemplo las imagenes van de arriba hacia abajo en 3 columnas. ¿Cómo debería hacer para que las imagenes vayan de izquierda a derecha y en tres columnas?!?! ¿Se puede hacer?

Saludos y muchas Gracias!!!
Martín

Responder

Pablo Iglesias
Pablo Iglesias

Hola Martín, muchas gracias por el comentario.
A día de hoy te sugiero hacerlo con grid-layout. Cuando hice este post aún no estaba plenamente implementado, pero hoy en día es la mejor solución para lo que quieres hacer.
Si no dominas CSS Grid, temos un post introductorio en este mismo blog  (www.campusmvp.es/.../...l-sistema-grid-de-css.aspx) pero si quieres aprenderlo bien a fondo te sugiero este curso: www.campusmvp.es/.../...-Grid-y-Bootstrap_212.aspx

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.