Estoy haciendo un curso de desarrollo web, y lo de jugar con grid no me acababa de entrar. No hablemos ya de hacer un diseño responsive, que he tenido que meter media queries a palazos y aun así no me quedaba bien del todo. ¡Y resulta que, bien explicado, es hasta fácil! 😄 ¡Un vídeo magnífico! (P'a ti -->🥇)
Otra vez me salvas la vida Midu. Cuando acabe de estudiar y me den chance a trabajar voy a poner una foto tuya en mi sitio de trabajo para que me guíe tu sabiduría.
Pues sí... Eso es justo y correcto: la magia del agradecimiento genera más abundancia y prosperidad que el afán del apego a acumular ganancias materiales.
Una de las mejores personas que conoci y como enseña, nos salvas a miles y miles, mereces mas reconocimientos y ojala este canal crezca mucho mas, saludos desde argentina miduu
Midu, eres un crack. Antes, cuando era niño (10-14 años), se me complicaba entender todo esto. No estoy seguro si era por la forma de explicar de los demás en los miles de videos que hay en TH-cam o simplemente yo era muy chico para entender. Después conocí tu canal. Al principio, no tenía mucha fe en que fueras bueno para explicar, pero me puse un video y todo cambió. Eres demasiado crack para explicar las cosas. Literalmente, cada vez que tenía una duda y pensaba que no entendería, de la nada planteabas la misma pregunta que yo tenía y la respondías en el video. JAJAJ. Ahora, a mis 17 años, puedo entender esto. ¡Gracias, Midu, de todo corazón! ¡Sí has cambiado vidas!
TE AMO ❤❤ @midulive, eres un EXCELENTE -apasionado de tu oficio de- PROFESOR. ¿Sabes?, tengo 60 años de edad, venezolana, aprendiendo cada día más gracias a Dios, a mi -amargado- profesor (🙄😒), y a tu genuino entusiasmo y amor por lo que haces... ¡Gracias!... ¡Dios te Cuide y Bendiga!
Una maravilla de video!! Mil gracias por tus explicaciones! Únicamente me gustaría comentar un detalle del vídeo ubicado en el minuto 51:36 En concreto esta pieza de código div{ display: grid; grid-template-columns:repeat( auto-fill, minmax(200px, 1fr) );
gap: 16px; } img{ width: 100%; height: auto; border-radius: 20px; } ------------------------------------------------------------------ Haciendo referencia a esta parte del código : grid-template-columns:repeat( auto-fill, minmax(200px, 1fr) ); Comentar que el tamaño exacto por el cual se generán nuevas columnas de forma automática no es únicamente los 200px que indicamos en la función minmax(200px, 1fr). Deberemos tener en cuenta el tamaño de la , el tamaño del contendor padre y el gap (espacio entre columnas). En referencia al gap en el caso de haber 1 columna no se tiene en cuenta. Si hay más de 2 columnas sería igual a num columnas - 1. --> Ejemplo calcular el gap: 2 columnas = gap 16px. 3 columnas = gap (16 x (3 col - 1) => 32px Pongo varios ejemplos y como calcularlo: 1 columna -> size-screen < 432 px (porque? porque el tamaño del contenedor padre de es html y este el width es de 416px y como indicamos 100% width ocupa todo el espacio del contenedor padre )+ 16px de 1gap al haber solo 2 columnas)) 2 columnas --> 432 648 864
Otra condición para user flex o grid sería celdas variables, flex es muy bueno para celdas variables incluso sea bidimensionales en cambio grid es más para celdas fijas. Por ejemplo en un Hero de dos columnas unidimensionales es mejor usar grid, porque hace dos columnas de valores fijos, grid-template-column: 1fr 1fr; directo en el container sin necesidad de poner flex: 1 a sus hijos si es que usaras flex. Pero si quieres hacer un listado en horizontal y que los elementos se ordenen si hay espacio o no facilísimo con flex-wrap: wrap; y te da un resultado multidimensional pero de celdas variables, hacerlo con grid solo se me ocurre el grid-temaplate-column: repeat(autofit, minmax(4rem, 1fr)); muy complejo, pero igual te da columnas fijas.
Midu con un bloque encima de otro, me salvaste la vida porque estaba matandome con el position absolute y este hack no lo sabía. Eres un grande sigue dándonos tus conocimientos!
Hola buenas tardes desde Argentina te saludo. Termino de realizar un curso de Desarrollo Web la verdad que no tenia claro lo de grid, te encontre gracias a Dios y más claro imposible tu explicación mil gracias por compartir tu saber. Me sumo a ser una seguidora más!!!!Saludos
dice poco de ti menospreciando el sitio en que estudias, era necesario tirar agua sucia al sena? lugar tan digno del que muchas familias obtienen educacion y sacan adelante sus sueños, familia etc
Ha sido una explicacion increible! el contenido lo has estructurado super bien, los consejos de mejores practicas y los casos de uso orientados a situaciones reales han sido 11/10. Muchas gracias
Muchas gracias, nadie nunca me había enseñado tales cosas tan fácilmente como tu, eres un GOD, espero poder aprender mas y algún día poder tener mi primer trabajo en una empresa y aplicar todo el conocimiento que nos ha otorgado de manera gratuita e incluso es mucho mejor que los cursos de pago que he visto en algunas plataformas
Hoy estaba haciendo una sección con flex e hice muchos media query y no estaba convencido al 100% del resultado, probé grid por tu video y pum, quedo a la primera, gracias Midu, soy tu fan jaja
En realidad justify-items:normal se comporta de manera similar a start, y no a stretch. Si ponemos un tamaño fijo se ve que se colocan al inicio del contenedor. En este caso como has usado un tamaño de fracciones parece que se comporta como stretch, pero no es así. De todos modos el video es muy bueno y explicas super bien, a mi me has hecho comprender mejor grid. Gracias.
De los mejores profesores con ejemplos y todo lo único que me falto fue subgrid que es algo muy importante, me encanto el ejemplo de los poster un verdadero crack
Habia estado usando el repeat sin saber exactamente como funcionaba o que hacia yo solo sabia que poniendo eso me daba el resultado que queria y cuando lo explicaste literalmente dije "ooohhh" jajaja
Grande Midu!!! Que pasada de clase me encantó, muchas gracias por explicar tan tan excelente jamás me había quedado tan claro todo el tema del Grid seguro ahora lo voy a usar más y de manera más correcta!!
He esperado esta explicacion de tu boca hace meses miduuu!!! ahora si voy a dejar flexbox de un lado, hace años quiero aprender grid pero me daba pereza jaja
Te estoy siguiendo hace un par de semanas pero ya me estoy volviendo loco, soy recién certificado en Backend , me agrada tu contenido pero es es lo que debo aprender que me sirva para hacer una web responsiva que me ayude sin dedicarle tanto al aprendizaje ya que mi propósito es Backend pero quiero porlomenos saber hacer un simple nav bar responsiva y con tantos videos de CSS , grid, Flex , y no se que más no se a cual dedicarle mi enfoque 😢
ManzDev esta muy pro en CSS, y en JavaScript, no solo sus Directos en el YT morado y su TH-cam, sus Guías en su Web también están muy buenas 100/100 muy buen contenido, el tipo se sumerge en el tema y explica bien xd.
Muy buen vídeo. Grid es muy útil pero hay veces que no funciona como se quiere y hay diferencias entre usar fr y % (cuando le pones gap o un contenido ocupa más de lo deseado)
Siempre funciona como se quiere, pero nosotros programamos mal. 1fr es en fracción del espacio restante y % siempre ha sido del padre, si pones gap obviamente va desbordar si usas %, en cambio con fr no deberías tener problemas, porque como te comento 1fr se calcula en base al resto. Por ejemplo: tengo 300px y pongo 1fr 1fr 1fr sería 3fr = 300px -> 1fr = 100px; si pones gap tendrás menos acorde a lo que pongas por ejemplo 236px, pero la ecuación es la misma, pero deja que CSS haga el cálculo con fr 3fr = 236px;
Gracias por el contenido, con respecto a lo responsive, por ejemplo en el caso de las fuentes, ahí sí se usaría sí o sí las @medias queries o habría otra forma?, gracias por la respuesta, saludos.
Estoy haciendo un curso de desarrollo web, y lo de jugar con grid no me acababa de entrar. No hablemos ya de hacer un diseño responsive, que he tenido que meter media queries a palazos y aun así no me quedaba bien del todo. ¡Y resulta que, bien explicado, es hasta fácil! 😄 ¡Un vídeo magnífico! (P'a ti -->🥇)
Gracias! ☺️
Otra vez me salvas la vida Midu. Cuando acabe de estudiar y me den chance a trabajar voy a poner una foto tuya en mi sitio de trabajo para que me guíe tu sabiduría.
xD
🤣
Pues sí... Eso es justo y correcto: la magia del agradecimiento genera más abundancia y prosperidad que el afán del apego a acumular ganancias materiales.
Ya sabia grid pero ma ayuda a recordar y no olvidarme de cosas esenciales.
Una de las mejores personas que conoci y como enseña, nos salvas a miles y miles, mereces mas reconocimientos y ojala este canal crezca mucho mas, saludos desde argentina miduu
Midu, eres un crack. Antes, cuando era niño (10-14 años), se me complicaba entender todo esto. No estoy seguro si era por la forma de explicar de los demás en los miles de videos que hay en TH-cam o simplemente yo era muy chico para entender. Después conocí tu canal. Al principio, no tenía mucha fe en que fueras bueno para explicar, pero me puse un video y todo cambió. Eres demasiado crack para explicar las cosas. Literalmente, cada vez que tenía una duda y pensaba que no entendería, de la nada planteabas la misma pregunta que yo tenía y la respondías en el video. JAJAJ. Ahora, a mis 17 años, puedo entender esto. ¡Gracias, Midu, de todo corazón! ¡Sí has cambiado vidas!
Tremenda MasterClass, ni en los programas de pago explican tan bien 🤜🤛 gracias
Este contenido es oro!!! Mil gracias. Eres muy bueno explicando y enseñando.
Gracias a ti!
TE AMO ❤❤ @midulive, eres un EXCELENTE -apasionado de tu oficio de- PROFESOR. ¿Sabes?, tengo 60 años de edad, venezolana, aprendiendo cada día más gracias a Dios, a mi -amargado- profesor (🙄😒), y a tu genuino entusiasmo y amor por lo que haces... ¡Gracias!... ¡Dios te Cuide y Bendiga!
Una maravilla de video!! Mil gracias por tus explicaciones!
Únicamente me gustaría comentar un detalle del vídeo ubicado en el minuto 51:36
En concreto esta pieza de código
div{
display: grid;
grid-template-columns:repeat(
auto-fill,
minmax(200px, 1fr)
);
gap: 16px;
}
img{
width: 100%;
height: auto;
border-radius: 20px;
}
------------------------------------------------------------------
Haciendo referencia a esta parte del código :
grid-template-columns:repeat(
auto-fill,
minmax(200px, 1fr)
);
Comentar que el tamaño exacto por el cual se generán nuevas columnas de forma automática no es únicamente los 200px que indicamos en la función minmax(200px, 1fr).
Deberemos tener en cuenta el tamaño de la , el tamaño del contendor padre
y el gap (espacio entre columnas). En referencia al gap en el caso de haber 1 columna no se tiene en cuenta. Si hay más de 2 columnas sería igual a num columnas - 1.
--> Ejemplo calcular el gap: 2 columnas = gap 16px. 3 columnas = gap (16 x (3 col - 1) => 32px
Pongo varios ejemplos y como calcularlo:
1 columna -> size-screen < 432 px (porque? porque el tamaño del contenedor padre de es html y este el width es de 416px y como indicamos 100% width ocupa todo el espacio del contenedor padre )+ 16px de 1gap al haber solo 2 columnas))
2 columnas --> 432 648 864
Midu, te has lucido con tus últimos en-vivo. Muchas gracias.
Gracias a ti!
Otra condición para user flex o grid sería celdas variables, flex es muy bueno para celdas variables incluso sea bidimensionales en cambio grid es más para celdas fijas. Por ejemplo en un Hero de dos columnas unidimensionales es mejor usar grid, porque hace dos columnas de valores fijos, grid-template-column: 1fr 1fr; directo en el container sin necesidad de poner flex: 1 a sus hijos si es que usaras flex. Pero si quieres hacer un listado en horizontal y que los elementos se ordenen si hay espacio o no facilísimo con flex-wrap: wrap; y te da un resultado multidimensional pero de celdas variables, hacerlo con grid solo se me ocurre el grid-temaplate-column: repeat(autofit, minmax(4rem, 1fr)); muy complejo, pero igual te da columnas fijas.
Sin duda este video es lo más importante desde que empecé a estudiar programación, debería ser material obligatorio
Midu con un bloque encima de otro, me salvaste la vida porque estaba matandome con el position absolute y este hack no lo sabía. Eres un grande sigue dándonos tus conocimientos!
Midulive, esto de las CSS GRID es: MA-RA-VI-LLO-SO. gracias por enseñarnos esto.!
Gracias a ti!
Hola buenas tardes desde Argentina te saludo. Termino de realizar un curso de Desarrollo Web la verdad que no tenia claro lo de grid, te encontre gracias a Dios y más claro imposible tu explicación mil gracias por compartir tu saber. Me sumo a ser una seguidora más!!!!Saludos
Aprendo más viendo tus videos mientras almuerzo que en una semana en el SENA (excepción de algunas clases). Midu ¡Eres un crack!
Gracias a ti!!
dice poco de ti menospreciando el sitio en que estudias, era necesario tirar agua sucia al sena? lugar tan digno del que muchas familias obtienen educacion y sacan adelante sus sueños, familia etc
Estoy de acuerdo con @agenciapersonal7573 que porquería de persona como hablara de mal de sus padres, muchas gracias @midulive por sus videos
Cállate cada quien tiene su perspectiva Bro @@agenciapersonal7573
@@agenciapersonal7573Dijo la pura verdad, el sena en programación toca ser autodidacta si no te mueres con eso tan antiguo que enseñan...
Uff! Lo que acabo de aprender con esto. Realmente no sabía usar GRID, no entendía por qué no se acomodan las cosas. Muchas gracias!
Hoy aprendí
y amé
y me gustó
y entendí
y abracé
...grid
Buenísimo, antes pensaba que grid era súper complicado, y es más fácil de lo que creía jajaj
Excelente!
Ha sido una explicacion increible! el contenido lo has estructurado super bien, los consejos de mejores practicas y los casos de uso orientados a situaciones reales han sido 11/10. Muchas gracias
Muchas gracias, nadie nunca me había enseñado tales cosas tan fácilmente como tu, eres un GOD, espero poder aprender mas y algún día poder tener mi primer trabajo en una empresa y aplicar todo el conocimiento que nos ha otorgado de manera gratuita e incluso es mucho mejor que los cursos de pago que he visto en algunas plataformas
vine a YT a buscar bronce y encontre oro!!
Que bien explicado!!! Exelente video Midu!!!!!! Gracias!!!!!!
Gracias a ti!!
Hoy estaba haciendo una sección con flex e hice muchos media query y no estaba convencido al 100% del resultado, probé grid por tu video y pum, quedo a la primera, gracias Midu, soy tu fan jaja
Muchas gracias por emplear tu tiempo en enseñarnos.
En realidad justify-items:normal se comporta de manera similar a start, y no a stretch. Si ponemos un tamaño fijo se ve que se colocan al inicio del contenedor.
En este caso como has usado un tamaño de fracciones parece que se comporta como stretch, pero no es así.
De todos modos el video es muy bueno y explicas super bien, a mi me has hecho comprender mejor grid. Gracias.
Eres un genio explicando. Mil gracias.
😀
Que CRACK!!!, justo estaba pensando que necesitaba un minimo tecnico de GRID, y PUM!!!, apareces tu, Gracias, Slds desde CUBA!!!!
De los mejores profesores con ejemplos y todo lo único que me falto fue subgrid que es algo muy importante, me encanto el ejemplo de los poster un verdadero crack
que bien explicas, midu las cosas más enredadas, con una tranquilidad y buen ánimo que admiro, agarras lo painful y le conviertes en soft curve, u crá
Muy bien explicado!! al fin entendí grid...🥲
Gracias por todos estos cursos, ahora seguire estudiando gracias por la iniciativia.
Un placer! 😊
Ufff me exploto la cabeza.. entendí perfecto. Gracias Midu :D
Habia estado usando el repeat sin saber exactamente como funcionaba o que hacia yo solo sabia que poniendo eso me daba el resultado que queria y cuando lo explicaste literalmente dije "ooohhh" jajaja
Ídolo, pasó volando la hora! Me estoy pegando una maratón con tus videos. Sos un capo explicando.
Grande Midu!!! Que pasada de clase me encantó, muchas gracias por explicar tan tan excelente jamás me había quedado tan claro todo el tema del Grid seguro ahora lo voy a usar más y de manera más correcta!!
El grid-template-area me explotó la cabeza
ya no quiero llorar mas, este es mi curso
Enserio te agradezco vale la pena ver los videos completos explicas como ninguna otra persona, saludos 🎉
literal necesitaba esta guía/tutorial de grid para una entrega. ¡Graciasss!
Excelente!
He esperado esta explicacion de tu boca hace meses miduuu!!! ahora si voy a dejar flexbox de un lado, hace años quiero aprender grid pero me daba pereza jaja
Gracias, me sirvió de mucho ❤
Excelente la explicacion , muy claro todo, felicitaciones
Ohhhh Midu que crack, me encanta tu contenido te sigo en todas las redes, entiendo super todo lo que explicas muchas gracias por todo!!!
Gracias! 😍
la mejor explicacion de grid que vi gracias!
Este contenido vale oro, gracias por compartir todo tu conocimiento.
WOW! Al fin entiendo Grid, ahora voy a por el de Flexbox 💪
Midu mil gracias por este curso. Increíble explicación de grid, actualizada y muy resumida
Gran Video Midu! Mil gracias, se entendió muy bien! Queda practicar ahora jajaja
Recuerden enviarle un Thanks los que puedan! sale mas barato que un curso en Udemy ;) Apoyenlo!
ese span 2 acaba de salvarme ya para siempre
A guardarlo en favoritos
¡¡¡¡¡❤Muchas gracias por tu labor educativa!!!
57:08 bueno eso se puede compactar en una linea tal que asi grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); en vez de que ocupe 3
Excelente!!!! La demostración de auto-fill comparando con la web de la Kings League es muy buena.
Eres genial explicando, muchas gracias!!!
En el momento: 1:15:54 editor: layout Quisiera tener habilitado eso en mi visual ¿Cómo se hace?
Te amo! Me has salvado la vida
Lol justamente esta semana en clase han empezado a enseñarnos grid. Jajajaja muchas gracias por el video :D
Gran explicación, enhorabuena por tu trabajo
Te estoy siguiendo hace un par de semanas pero ya me estoy volviendo loco, soy recién certificado en Backend , me agrada tu contenido pero es es lo que debo aprender que me sirva para hacer una web responsiva que me ayude sin dedicarle tanto al aprendizaje ya que mi propósito es Backend pero quiero porlomenos saber hacer un simple nav bar responsiva y con tantos videos de CSS , grid, Flex , y no se que más no se a cual dedicarle mi enfoque 😢
Buenísimo el video y la explicación, te has ganado un nuevo suscriptor!!
1:14:45 en este momento me replantee mi vida
Tremendo video, entendi todo de una!
Espectacular la parte de Areas
que divertido es reaprender css contigo midu! sigue porfavor! xD gracias mil!
muy bueno ... espero mas videos !!!
Grande midudev me ayudaron bastante estos videos para terminar de repasar CSS. Muchas gracias por el contenido.
gracias bro , gran video explicas muy bien
Gracias por sus clases estan muy buenas
Genial, ya puedo centrar un div de 3 formas distintas
Gracias por todo mindu eres grande 😁
Este es el video definitivo de Grid. Solo es ponerlo en practica en un par de ejercicios uno mismo y ya quedaría grabado a fuego!
Gracias!
Gracias midu, justo lo que necesitaba para actualizar mi web con puro Flex 😂
Estos vídeos me dan la vida
ManzDev esta muy pro en CSS, y en JavaScript, no solo sus Directos en el YT morado y su TH-cam, sus Guías en su Web también están muy buenas 100/100 muy buen contenido, el tipo se sumerge en el tema y explica bien xd.
Justo lo que ando buscando 😍
Muy buenos videos , aprendo muchísimo
Muy buen vídeo. Grid es muy útil pero hay veces que no funciona como se quiere y hay diferencias entre usar fr y % (cuando le pones gap o un contenido ocupa más de lo deseado)
Tengo una pregunta. ¿No funciona como se quiere o no se sabe usar en su totalidad?
Ocupa más espacio del deseado (más del 100%) y tienes que hacer cálculos@@devsantiago
Siempre funciona como se quiere, pero nosotros programamos mal. 1fr es en fracción del espacio restante y % siempre ha sido del padre, si pones gap obviamente va desbordar si usas %, en cambio con fr no deberías tener problemas, porque como te comento 1fr se calcula en base al resto. Por ejemplo: tengo 300px y pongo 1fr 1fr 1fr sería 3fr = 300px -> 1fr = 100px; si pones gap tendrás menos acorde a lo que pongas por ejemplo 236px, pero la ecuación es la misma, pero deja que CSS haga el cálculo con fr 3fr = 236px;
Gracias por el contenido, con respecto a lo responsive, por ejemplo en el caso de las fuentes, ahí sí se usaría sí o sí las @medias queries o habría otra forma?, gracias por la respuesta, saludos.
Excelente como siempre! 😜 ❤❤
Gracias mil!!
me agrada tu contenido sos capo y en español
Saludos midu..! Gracias por tu contenido saludos desde Ecuador amigo..! Que sigas adelante en tus proyectos personales, eres un tipaso..!
Grande miduuu!! Saludos desde Argentina.
Que debo aprende más flex box grid o sass bootsptrap ? O cuáles si y cuáles no para este año 2024…?
gracias, me fue de muuuuuuuuucha ayuda!
Excelente!
Gracias Amigo!!!!! Saludos,
Excelente, midu. Muchas gracias :)
Gracias Midu!
شكراً جزيلاً وجزاك الله خيراً ❤
Gracias midu! Pude entender perfectamente minmax
Excelente!
Que buen contenido Midu, explicas muy bien! Gracias !!
eres el GOAT 💯
Gracias Midu 🎈
que pasada, muchas gracias midu!
Genial Video Amigo en cuanto pueda me veo los anteriores videos que mencionaste , Genio muy bueno ! bien Explicado!
Explicas demasiado bien...
Eres el mejor midu! ❤
muchas gracias por el contenido mas claro no puede ser!!! podrias algun dia hacer esto mismo con tailwind? muchas gracias!
Hola midu y su comunidad, al terminar este curso que toca seguir aprendiendo?
El mejor ❤, gracias!!