Responsive image gallery using CSS GRID | Adaptive design

[@YoelvisM]

Les dejo este codepen con el ejemplo del video para que puedan probarlo y experimentar fácilmente: codepen.io/ymulenll/pen/poyYyzE Un abrazo a todos, gracias por seguir mi canal 👋

[@adrianheisfreccero2225]

Yoelvis, eres enorme explicando, muchas gracias!!!!, un saludo

[@horaciomanuli]

MUCHÍSIMAS GRACIAS GENIO!!! EL CÓDIGO ES DE SUMA UTILIDAD PARA MÍ. TE AGRADEZCO ENORMEMENTE QUE BRINDES TUS CONOCIMIENTOS A LA GENTE QUE ESTÁ APRENDIENDO DISEÑO Y PROGRAMACIÓN. SALUDOS DESDE BUENOS AIRES!!! YA ME SUSCRIBO AL CANAL, Y TE SIGO EN GITHUB.

[@srta.pantalones]

Tengo TDAH pero deseos de aprender a desarrollar. Me ha costado muchísimo centrarme y entender lo que me explican; a veces me siento tonta, y es que no todas las explicaciones las entiendo. Pero tú y tu manera de explicar me han facilitado no solo entender lo que explicas acá sino cómo utilizarlo con libertad a futuro. De verdad muchas gracias por todo tu valioso contenido. Suscrita.

[@LauraOviedo-h7f]

Es justo lo que necesitaba! Vi muchos videos y este definitivamente es el mejor. Muy bien explicado y muy completo. Muchas gracias!!

[@raulernestosanchezperez1022]

100% RECOMENDADO. Agradecido por sus conocimientos estimado Yoelvis. Saludos.

[@ipc1962]

Estaba buscando una solución; pero esto es super elegante!!!!

[@nataliaevelyncauda7226]

EXCELENTE!!! Muchísimas gracias por compartir tus conocimientos!!!!!

[@aristotelesprimero]

diablos!!!, que estaba haciendo yo, en lugar de haber ido al cole hubiese empezado a estudiar html, css y js en el 2015 fackkkkk, que buen video YOE

[@yulltimoteo2769]

Estoy aprendiendo a programar, pero en realidad eres demasiado Gozu! Felicidades!

[@yo_mastermind]

¡Excelente video! La mejor explicación que he visto de CSS Grid y en escasos 15 minutos... Genial, te felicito!

[@arianrodriguez8219]

Nada mas escuchar su acento supe de donde es... saludos de alguien proveniente del mismo país, que alegría descubrir su canal. Éxitos

[@YoelvisM]

gracias Arian 🇨🇺

[@arianrodriguez8219]

@@YoelvisM con esfuerzo y constancia me adentré en este mundo, ha sido todo un reto pues soy graduado de rehabilitación, rubro muy lejano.

[@ian0783]

Se ve que eres un tipo que sabe de lo que habla muy pero muy buen video me encanta tu canal.

[@kikemaya7758]

Muchas gracias maestro. Me encantò el enfoque pràctico sobre còmo se usa grid en el mundo real. Bendiciones.

[@JorgeGens]

Buah, tremendo Yoelvis, gracias!

[@monicapablo2796]

Muy buena la calidad de tu trabajo. Espero mas videos. Gracias

[@josecontreraslara3259]

Me serviría mucho tu ayuda para mí pregunta, me encanta esto tienes un suscriptor

[@JLonuz]

Me gustó mucho este ejemplo, es súper fácil poder conocer y entender el poder de css grid! Espero que saques más videos de css grid, ya que recién estoy metiéndome. Me gusta poder hacer con css nativo estas cosas porque ya no dependemos de bootstrap u otros frameworks!

[@Catto33]

Demasiado facil, codigo limpio y entendible.

[@wledao]

Impecable la explicación, muy claro y pedagógico todo, y mostrando alternativas para entender cómo funciona en general. Aparte, compartiendo el código. Realmente muy bueno todo y muy generoso vos. Ya me suscribí, y te sigo en twitter. Te felicito, y muchas gracias por el video y el material!

[@huron6410]

Me Lo Recomendaron Y La Verdad Es Que He Aprendido Perfectamente. Muchas Gracias Por Hacer Esta Calidad De Contenido. Te Deseo Lo Mejor Para Este Año.

[@cdicho]

Veo muchos videos para aprender pero la verdad tu nivel es excelente

[@glapuente]

excelente, gracias por su tiempo y su paciencia

[@yahyarahmandoost9816]

Muy bien explicado genio . Muchas gracias 😍😍😍

[@alanrojas1398]

Estos videos son increíbles, buscando un tema en particular repase cosas que ni me acordaba. Gracias maestro!

[@obitomadara9026]

muchas gracias profe acabo de terminar un master y estoy respasando lo aprendido con tus clases y son increibles un gran trabajo, un saludo

[@danyamanzilla3654]

muchísimas gracias por compartir estos videos!!

[@encode2390]

Hermano, que increíble video, muy completo

[@davidrosenblum4079]

Increíble, maravilloso!!! Muchas gracias por esos trucazos CSS.

[@davidcarrerasalbacete510]

Fantástico ejemplo. Gracias por compartir.

[@Max-tq1ig]

Usted es increíble!! Es una fortuna tenerlo de maestro, gracias.

[@oscarforastieri619]

Exelente video Yoelvis, muy bien explicado y muy util; felicitaciones !!!

[@virtualpyshop_py2603]

Excelente tutorial. Muchas gracias

[@nemerieoutoftheshell9057]

Gracias Yoelvis! Muy buen video. De veras que al fin entiendo el CSS grid. Seguidora desde ya de tu canal.

[@fungirak10]

Nuevo suscriptor, tu forma de enseñar es lo que reluce! gracias por el contenido de calidad.

[@YoelvisM]

muchas gracias por suscribirte, un saludo!

[@sgmonda]

Muy bien explicado. Directo al grano. Chapó.

[@evamariazapanapari3040]

Una explicación excelente felicidades😄

[@JLBayTV]

Excelente vídeo, sigue así. Espero el próximo.

[@alejandroobregon2834]

Que bueno ver a un cubano haciendo vídeos de programación, se nota la forma analítica, precisa de los ingenieros cubanos, buen vídeo, saludos.

[@YoelvisM]

Gracias Alejandro, saludos a ti también

[@tidyodooy]

Vos si que haces magia crack!!

[@danielosorio5102]

Excelente me encantan sus videos, muy claros muy limpios.

[@davidferrand01]

Excelente brot. Dios te bendiga, hacia adelante.

[@YoelvisM]

Dios te bendiga hermano, un abrazo

[@nexts-shop]

Excelente contenido. Mil gracias master. Simplifica el aprendizaje. Éxitos hermano

[@egm5081]

Muy bueno el video, muy bien explicado, muchas gracias!

[@elliotgaramendi]

Sin duda para hacer bentos está genial.

[@vanityzzz]

estupendo, me esta sirviendo de mucha ayuda, gracias.

[@gaballester]

Excelente, siempre mosteando más de lo común. me encantó grid-auto-flow:dense no lo conocía!!! Te felicito, super claro y muy útil

[@edwincalderxn]

Excelente calidad de video, deberías tener millones de vistas.

[@YoelvisM]

Muchas gracias!!

[@tape...]

Muy fácil y práctico, mil gracias.

[@marianocamilli848]

Increible! Muchas Graciaaassss

[@sergioabelhuanacchiritupa4842]

Gracias hermano, estoy muy agradecido

[@rocodev23]

GENIO!!! Aprendí Grid en 15 minutos y de paso iba probando cositas mientras te seguia en el video. Ya me suscribí y un like, voy a verme mas seguido tus videos explicas muy bien. Edit: Espero que saques ese video del maquetado, activo la campana jaja. :D

[@alexistorrealba6962]

Excelente contenido felicitaciones.

[@Fabri_edits]

Muchas gracias amigo, explicas muy bien!

[@Juancarloscr8]

Que bien explicas, gracias por compartir tus conocimientos. Nuevo seguidor, saludos 🖖

[@teczervice]

Muy bueno y clara la explicación, gracias

[@oscarquinterotellez592]

Muy buen video hermano, nuevo sub! muy claro con la explicación y algo a destacar, que explicas las posibles vertientes

[@Frank.E.J]

Mereces mil veces la cantidad de suscriptores que tienes!

[@YoelvisM]

Gracias 🙂, poco a poco voy creciendo, tengo muchas ideas de proyectos y cursos que según tenga tiempo los iré grabando, con el buen contenido de seguro crecen los suscriptores, un saludo y gracias por el apoyo

[@erikamantilla2991]

Eres genial ! muchas gracias por compartir en KZbin ! !

[@hernanramirezweb]

Excelente explicación

[@MauroJH]

Impecable! Explicas para que sirve cada cosa. No he encontrado otro tan claro como vos.Gracias! Ahora consulto y perdón mí ignorancia...que son los span?. En la práctica los uso pero sin entender que como cuando y porque

[@cristiansantana4431]

muchas gracias amigo ¡¡ excelente explicación me sirve mucho ¡¡ sigue así...

[@ANTONYJORGEVELAGUERRA]

Brutal! Muchas Gracias...

[@ernepazzo1212]

Excelente video. Gracias!!!

[@jesusre8495]

Increible, gracias!

[@eliassantos8982]

Excelente video!!! muy bien explicado. Gracias por compartir su saber. Dios lo bendiga!!!

[@danyamanzilla3654]

maravilloso video!!

[@CarlosMorales-kb1hd]

Excelente video amigo.

[@manuelalejandrorodriguezhe5784]

muy buen vídeo corto y muy productivo, saludos desde Liencres 🙌

[@luiscarlostrotta8119]

Excelente Yoelvis!!!! Muy didáctico y claro!!!! muchas gracias !!!!!!Consulto si tienes cursos de Java?, saludos desde Argentina!!!

[@martimarti5462]

Excelente! muchas gracias

[@luismaocampo7866]

Se gano un sub camarada

[@carlosgiraldez1352]

Gracias, muy bueno todavía hay mucho por aprender.

[@rodolfoyanz1094]

Gracias, por todo, para una página web puedo poner debajo del header o navbar y después y debajo de las img, el footer o una sección, gracias solo para aprender😊

[@jjav1978]

Espectacular!!!!

[@franklinxavierrodriguezsan3359]

Excelente material

[@marcodeev4168]

Excelente video hermano programador !!!

[@romer0797]

excelente video, muchas gracias por la explicación!!

[@juliokof]

Buen video. Gracias!

[@solo_andres_v]

Grande maestro, todo muy bien explicado, muchas gracias por compartir.

[@YoelvisM]

Muchas gracias

[@enriqueatala2567]

Hola Elvis, muy buenos tutoriales... te pido vayas mas despacio para poder observar tus modificaciones y efectos en live server. Se puede enlazar que el contenido de cada celda del grid con el contenido de un registro de la tabla de datos de una base de datos recorriéndola?

[@felipecarballodraw5278]

Me quedo feisima mi version, pero al menos aprendi como hacerlo, muchas gracias

[@maikelrosabal8330]

Exhilarating video Yoelvis, thanks.

[@YoelvisM]

Hola mi amigo, muchas gracias por el apoyo, que bueno que te gustó el video

[@henyfarfan3707]

Saludos yoelvis desde Venezuela te saludamos casa de misericordia

[@YoelvisM]

Hola Heny, siempre los recuerdo con mucho cariño, un abrazo a la familia y hermanos por allá

[@henyfarfan3707]

@@YoelvisM que buenoooo por ak el cariño es el mismo verte así de feliz y haciendo lo que te gusta es grato Dios te guarde a ti y a tu amada esposa

[@alexisbello6516]

Hola excelente video... Quisiera ver ese maquetado completo

[@layomeza7881]

excelente aporte, hacer un maquetado completo de una pagina para usarlo como plantilla

[@joelrcha3368]

chulada de video

[@martinleandroarcuri117]

sos el fuking dios!

[@ccencisoj]

Excelente video

[@yoss9054]

.... súper!!...😊 gracias

[@edgardoisla1427]

Genio!

[@uncapo3106]

Buenardo hermano

[@carloscuesta9491]

Hola Yoelvis como estás? Excelentes tus tutoriales!!! A partir de esta galería... Cómo puedo hacer la ventana modal haciendo click en cada imagen?

[@mitubo1970]

Vaya... todo iba muy bien hasta 15:19 que decides añadir queries.... ¿Realmente son tan necesarias? ¿Podrías utilizar auto-fill/fit y minmax() como enseñaste en la parte teórica? Muchas gracias.

[@YoelvisM]

Hola, pues si que a veces son necesarias como en ese caso específico que quiero que se expandan de forma diferente las filas y columnas al tener más ancho, eso no lo puedes lograr con lo que comentas. Además creo que las media queries son bien prácticas y fáciles de utilizar en casos como estos. Saludos

[@AlgoBack]

Hola Yoelvis, como estas? He seguido tu tutorial y me ha funcionado excelente. Me gustaría saber que hacer para que las imágenes no cargues de continuo cuando muevo la barra para bajar a ver las demás imágenes. Si bajo, estas inician cargando y si subo a ver las otras imágenes, estas vuelven y cargan. Me interesa que solo carguen para ajustar el tamaño solo si cambio el ancho de la pagina. Te agradeceré to colaboración. Un Saludo y gracias de antemano...

[@senixcode5601]

genial

[@TheMarckoz]

Buen contenido.

[@YoelvisM]

Gracias!

[@emilianolus9215]

Excelente

[@matias3797]

yoelvis esta muy bueno el video, sabes que estoy teniendo este problema, quiero hacer mas grande el heigh del main y no me deja sabes como puedo solucionarlo? es para meterle mas cosas dentro

[@matiasamarilla6358]

Un capo.

[@mselbosque]

Buenas tardes. Te felicito por tu video. Muy bien explicado, se te facilita. Te puedo pedir un favor. Si requiero ir a un vínculo al hacer click en los elementos del grid, cómo lo podría agregar? muchas gracias, bendiciones

[@YoelvisM]

Puedes usar el elemento elemento clickable, rodeas el elemento que quieras con a, y ya se le podrá hacer click. Saludos

[@mselbosque]

@@YoelvisM , muy agradecido por responderme. Soy un poco principiante en esto. Es que no veo en qué parte pudiera ir. . Es que la imagen la usa desde el style bakgorund-image y no sé donde iría el "". Muchas gracias