Galería de imágenes tipo Pinterest con HTML, CSS y JS | Masonry Layout - Tutorial

Опубликовано: 16 Февраль 2026
на канале: Yoelvis Mulen { code }

13,179

555

Cómo hacer una galería de imágenes tipo Pinterest (Masonry) donde tenemos imágenes de diferentes dimensiones. Les muestro cómo hacerlo con CSS Grid y las limitaciones que éste tiene de momento. Luego lo resolvemos usando una librería de JavaScript.

✅ Contenido:
0:00 Introducción y primeros pasos
2:09 CSS Grid
5:53 CSS Grid Masonry Layout
8:02 Masonry JS
13:48 Retoques finales

📺 Videos relacionados:

Serie sobre diseño adaptativo:
• Galería de imágenes responsive usando CSS ...

👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.

🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
https://www.youtube.com/yoelvism?sub_...

🐤Sígueme en twitter:
/ ymulenll

📌Enlaces:
Código del ejemplo: https://github.com/ymulenll/masonry-l...
Borrador CSS Grid v3: https://drafts.csswg.org/css-grid-3/
Documentación Masonry Layout: https://developer.mozilla.org/en-US/d...
Librería masonry: https://masonry.desandro.com/
Librería imagesLoaded: https://imagesloaded.desandro.com/

Muchas gracias por ver este video, espero le haya sido útil.
#css #grid