Aprende CSS Grid MUY FÁCIL con ejercicios 

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.

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 -->🥇)

Ya sabia grid pero ma ayuda a recordar y no olvidarme de cosas esenciales.

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

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

Este contenido es oro!!! Mil gracias. Eres muy bueno explicando y enseñando.

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

Enserio te agradezco vale la pena ver los videos completos explicas como ninguna otra persona, saludos 🎉

Que buen contenido Midu, explicas muy bien! Gracias !!

Aprendo más viendo tus videos mientras almuerzo que en una semana en el SENA (excepción de algunas clases). Midu ¡Eres un crack!

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!!

Grande midudev me ayudaron bastante estos videos para terminar de repasar CSS. Muchas gracias por el contenido.

la mejor explicacion de grid que vi gracias!

Eres un genio explicando. Mil gracias. 😀

Este contenido vale oro, gracias por compartir todo tu conocimiento.

Que CRACK!!!, justo estaba pensando que necesitaba un minimo tecnico de GRID, y PUM!!!, apareces tu, Gracias, Slds desde CUBA!!!!

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

que divertido es reaprender css contigo midu! sigue porfavor! xD gracias mil!

Justo lo que ando buscando 😍

que pasada, muchas gracias midu!

Sin duda este video es lo más importante desde que empecé a estudiar programación, debería ser material obligatorio

Muchas gracias por emplear tu tiempo en enseñarnos.

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

Excelente la explicacion , muy claro todo, felicitaciones

Gran explicación, enhorabuena por tu trabajo

Excelente, midu. Muchas gracias :)

Genial Video Amigo en cuanto pueda me veo los anteriores videos que mencionaste , Genio muy bueno ! bien Explicado!

Tremendo video, entendi todo de una!

Te amo! Me has salvado la vida

Gracias, me sirvió de mucho ❤

Ídolo, pasó volando la hora! Me estoy pegando una maratón con tus videos. Sos un capo explicando.

Midu, te has lucido con tus últimos en-vivo. Muchas gracias.

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

WOW! Al fin entiendo Grid, ahora voy a por el de Flexbox 💪

Hoy aprendí y amé y me gustó y entendí y abracé ...grid

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!

literal necesitaba esta guía/tutorial de grid para una entrega. ¡Graciasss!

Excelente como siempre! 😜 ❤❤

Excelente!!!! La demostración de auto-fill comparando con la web de la Kings League es muy buena.

Gracias por todo mindu eres grande 😁

¡¡¡¡¡❤Muchas gracias por tu labor educativa!!!

Saludos midu..! Gracias por tu contenido saludos desde Ecuador amigo..! Que sigas adelante en tus proyectos personales, eres un tipaso..!

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!

Grande miduuu!! Saludos desde Argentina.

Lol justamente esta semana en clase han empezado a enseñarnos grid. Jajajaja muchas gracias por el video :D

El mejor ❤, gracias!!

Ohhhh Midu que crack, me encanta tu contenido te sigo en todas las redes, entiendo super todo lo que explicas muchas gracias por todo!!!

Eres el mejor midu! ❤

Buenísimo el video y la explicación, te has ganado un nuevo suscriptor!!

Gracias mil!!

Gracias Amigo!!!!! Saludos,

Estos vídeos me dan la vida

Gracias por sus clases estan muy buenas

Midu mil gracias por este curso. Increíble explicación de grid, actualizada y muy resumida

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.

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

Gracias midu, justo lo que necesitaba para actualizar mi web con puro Flex 😂

Gracias Midu 🎈

Yo antes de ver como hacias el layout, intentandolo por mi cuenta, super contento por conseguirlo usando el grid-areas pero de forma 'normal' es decir indicando inicio y fin de fila y columna. Y de repente veo como lo has hecho y me he quedado como guuuuaaaaaaaaaaaaaaauuuuuuuuuu, mil gracias por estos videos, son super utiles, hacen que un novato como yo que llevo dos dias, tenga unos recursos muy interesantes

Buenísimo, antes pensaba que grid era súper complicado, y es más fácil de lo que creía jajaj

Midulive, esto de las CSS GRID es: MA-RA-VI-LLO-SO. gracias por enseñarnos esto.!

muy muy bueno!

muchas gracias por el contenido mas claro no puede ser!!! podrias algun dia hacer esto mismo con tailwind? muchas gracias!

Vamasssss Midu 🔥🔥🔥

gracias, me fue de muuuuuuuuucha ayuda!

A guardarlo en favoritos

eres el GOAT 💯

Espectacular la parte de Areas

crak me ayudaste un monton

muchas gracias

Gracias midu! Pude entender perfectamente minmax

ya no quiero llorar mas, este es mi curso

Genial, ya puedo centrar un div de 3 formas distintas

vamos a aprender :D

Excelente!!!

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

Graciasss

Grande midu gracias por los videos que sera lo siguiente de esta serie ? responsive desing ?

شكراً جزيلاً وجزاك الله خيراً ❤

Gracias

Gracias por todos estos cursos, ahora seguire estudiando gracias por la iniciativia.

Thanks!

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

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 😢

ese span 2 acaba de salvarme ya para siempre

me agrada tu contenido sos capo y en español

Fantastic! ✌😁✌

vine a YT a buscar bronce y encontre oro!! Que bien explicado!!! Exelente video Midu!!!!!! Gracias!!!!!!

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.

ManzDev esta muy pro en CSS, y en JavaScript, no solo sus Directos en el YT morado y su RU-vid, 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.

El mejor!!

Gracias Midu por el video, justamente estamos analizando usar Flexbox o Grid en el trabajo. Creo que en esta oportunidad vamos con GRID.

Eres genial explicando, muchas gracias!!! En el momento: 1:15:54 editor: layout Quisiera tener habilitado eso en mi visual ¿Cómo se hace?

El grid-template-area me explotó la cabeza

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 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.

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)

Hola midu y su comunidad, al terminar este curso que toca seguir aprendiendo?

Tambien se pueden usar areas.

Explicas demasiado bien...