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: 
https://www.youtube.com/watch?v=f3902x_dqqQ&list=PL9T-KKyKXNCkoNtv_iK10LJhuuGCKWTcW&ab_channel=YoelvisMulen%7Bcode%7D

👀 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_confirmation=1

🐤Sígueme en twitter:
https://twitter.com/ymulenll

📌Enlaces:
Código del ejemplo: https://github.com/ymulenll/masonry-layout
Borrador CSS Grid v3: https://drafts.csswg.org/css-grid-3/
Documentación Masonry Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
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

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