Cómo hacer una galería de imágenes en HTML y CSS 💪🏾 | Galería HEXAGONAL RESPONSIVE 🤩 

Es el tercer tutorial que voy a ver y a realizar. Los dos anteriores estuvieron súper. He aprendido y entendido conceptos que hasta ahora me quedaron claros. FELICIDADES !!!

Me salvaste! Muy buen video , excelente audio , muy bien explicado , espero que saques muchos videos más, saludos!

Wow, acabo de descubrir tu video, eres genial!!, la explicación excelente 👌, gracias por compartir tus conocimientos, éxitos!! 👏

Es la primera vez que me suscribo con solo ver un video, super bueno el tuto, gracias

muchas gracias por tu ayuda, excelente explicación ..felicitaciones....

Excelente explicación 👏👏👏

Este video es uno de los cuales merecen tener mas vistas y mas like. Increible la manera de dictar la clase, se hecha de ver que te encanta el diseño web y eso hace que hagas un excelentisimo trabajo. Mis respetos y admiracion para ti, me ha servido mucho este video a aprender mas sobre CSS Grid y las maravillas que se pueden hacer con ello. Ten clarisimo que me tendras viendo cada uno de tus videos. Saludos.

Esta espectacular, muchísimas gracias por compartir, seria genial si pudieras subir el código a algún repo como github

uff.. buenisimo. gracias!

excelente video gracias... seria buen aun parte dos donde al darle click se pueda ver la imagen en grande...

excelente video, mil bendiciones

muchas gracias! me encanto. besos!

Excelente video, muchas gracias

Excelente video, de verdad un diseño muy genial 😎 😮

Muchas gracias .. excelente ..

increible apenas lo vi

Muchas gracias..

muchas gracias, me salvaste jajaja

gracias me sirvió mucho

Muy buenas tardes, me encantó tu video, incluso lo compartí con otros desarrolladores. Pero me surgió una duda, intenté hacerlo colocándole un "parragraph" a cada hexágono, pero directamente no aparece u ocupa la mitad de la figura, haciendo que la figura desaparezca. Quisiera saber si pudieras decirme cómo hacer que el texto se sobreponga al hexágono con la ayuda de un "hover" De ante mano muchas gracias por tu atención y felicidades, excelente video en verdad !!

Me encanta el theme de tu Visual Code!!!, podrias decirme nombre para buscarlo y poder instalarmelo. Gracias mil.

IMPRESIONANTE!!! solo que mis imagenes son muy grandes.. tengo que ver como achicarlas

Es mi siguiente reto hacer esa galeria ya he hecho varios con apoyo de programadores como tu

Interesante tu exposición, me fui al minuto 15:37, vi como dos minutos y ... ya tienes otro suscriptor. Termino el comentario y veré todo el video, se que voy a aprender. pregunta ¿que plugin utilizas para visualizar las fotos en VSC??, de antemano Gracias por tu respuesta.-MODIFICACION- Listo viendo tu video de "Pon bello tu editor..." me das la respuesta IMAGE preview. Gracias de nuevo.

Excelente video, una consulta como podría hacer para que el hexágono sea un poco mas pequeño sin que se descuadre

y con flex como seria?

como se habre el inspector de propiedades?

Yo intente hacerlo en replit y no me funciono :(

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } img { width: 100%; height: 100%; object-fit: cover; } .gallery { width: 85%; max-width: 1200px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(auto-fit, 133px); grid-auto-rows: 200px; justify-content: center; gap: 1rem; } .gallery_item { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); grid-column: span 2; /*266px + 17px = 283px */ height: 283px; transition: 0.5s filter; } .gallery_item:hover { filter: brightness(0.3); } .gallery_item:first-of-type { grid-column: 2/ span 2; } /*Media Queries*/ @media screen and(min-width:270px) and(max-width: 504px) { .gallery_item:first-of-type { grid-column: 1 / span 2; } .gallery { grid-auto-rows: 283px; } } @media screen and(min-width:505px) and(max-width: 685px) { .gallery_item:nth-of-type(odd) { grid-column: 2 / span 2; } } @media screen and(min-width:686px) and(max-width: 862px) { .gallery_item:nth-of-type(3n + 1) { grid-column: 2 / span 2; } } @media screen and(min-width:863px) and(max-width: 1038px) { .gallery_item:nth-of-type(4n + 1) { grid-column: 2 / span 2; } } @media screen and(min-width:1039px) and(max-width: 1215px) { .gallery_item:nth-of-type(5n + 1) { grid-column: 2 / span 2; } } @media screen and(min-width:1216px) and(max-width: 1391px) { .gallery_item:nth-of-type(6n + 1) { grid-column: 2 / span 2; } } @media screen and(min-width:1392px) { .gallery_item:nth-of-type(7n + 1) { grid-column: 2 / span 2; } } Hola muchas gracias por el video disculpa así llevo el css y tengo problemas y no sé que puede que haya hecho mal

Hola, yo realicé la galería tal cual la hiciste, pero la implementé en mi codigo con texto y no me queda alineada, crees que me puedas ayudar?