Galería masonry en CSS (estilo Pinterest)
Pega las direcciones de las fotos (una por línea) o usa las de ejemplo. La vista previa muestra el encaje al instante.
Cómo usarFotos de alturas diferentes, sin huecos
Disponible en: 
Galería masonry en CSS (estilo Pinterest): para qué sirve
El layout masonry encaja fotos de alturas diferentes en columnas, sin huecos, como en Pinterest. Pega las direcciones de las fotos y elige las columnas en celular, tableta y computadora, el espaciado, las esquinas y la leyenda sobre la foto.
El código usa CSS columns, que funciona en todos los navegadores, y agrega el masonry nativo de CSS (display: grid-lanes, lanzado en Safari 26.4 en marzo de 2026 y aún sin soporte estable en Chrome y Firefox) dentro de un @supports, como recomienda la mejora progresiva. La página explica la diferencia de orden entre las dos técnicas.
Cómo usar
- Pega las direcciones de las fotos.
- Ajusta columnas, espacio y esquinas.
- Copia el código.
Cuándo usar
- Portafolio de fotógrafo.
- Galería de trabajos de un salón o estudio.
- Mural de inspiración.
Preguntas frecuentes
¿Qué es el layout masonry?
Es la cuadrícula en la que los elementos tienen el mismo ancho pero alturas diferentes, y cada uno se acomoda justo debajo del anterior en la columna, sin dejar espacios vacíos. Se hizo famoso con Pinterest y combina con fotos verticales y horizontales mezcladas.
¿Necesita JavaScript?
No. El código usa CSS columns, que funciona en todos los navegadores. Donde ya existe el masonry nativo de CSS (display: grid-lanes, lanzado en Safari 26.4 en marzo de 2026), un @supports activa la versión nueva, que mantiene el orden de las fotos de izquierda a derecha.
¿Por qué cambia el orden de las fotos con CSS columns?
Con columns, las fotos bajan por la primera columna y solo después pasan a la segunda, como en un periódico. Si el orden importa (las más nuevas primero, por ejemplo), pon las más importantes al principio de la lista y usa pocas columnas, o espera a que grid-lanes llegue a los otros navegadores.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.