Aprende CSS Grid MUY FÁCIL con ejercicios

[@KiraJ.Fernández]

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

[@midulive]

Gracias! ☺️

[@AdrusMcpaketazo]

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.

[@CarloJaves]

xD

[@danielescobar8263]

🤣

[@AdeBi888]

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.

[@ivanjaviergonzalez7835]

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

[@stevenskl5294]

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

[@TheReycel75x]

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

[@midulive]

Gracias a ti!

[@kieniandres]

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

[@kikevanegazz325]

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

[@midulive]

Gracias a ti!

[@salom6119]

Pero qué increíble clase, de verdad espectacular, una maravilla de clase. Casi lloro de la emoción; lo de grid-area es superpotente y sencillo de usar. La función de minmax y repeat para suplir media queries me encantó. Todo el tiempo estoy aprendiendo de video tutoriales en internet, pero este me fascinó. Muchas gracias midu, sencillamente eres el mejor.

[@joanstiven2216]

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

[@midulive]

Gracias a ti!!

[@agenciapersonal7573]

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

[@duberneyobando5013]

Estoy de acuerdo con @agenciapersonal7573 que porquería de persona como hablara de mal de sus padres, muchas gracias @midulive por sus videos

[@juandiego234]

Cállate cada quien tiene su perspectiva Bro ​@@agenciapersonal7573

[@alguienc137]

​@@agenciapersonal7573Dijo la pura verdad, el sena en programación toca ser autodidacta si no te mueres con eso tan antiguo que enseñan...

[@leandrootero3472]

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

[@LegonTW0]

1:14:45 en este momento me replantee mi vida

[@eduforero]

Tremenda MasterClass, ni en los programas de pago explican tan bien 🤜🤛 gracias

[@todosiemprepasa4356]

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

[@elliotgaramendi]

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.

[@millhiorebt]

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

[@luischicaiza7794]

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!

[@adriauson2957]

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

[@usuarioaleatorio336]

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á

[@jorgelezcano6638]

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

[@dambedev]

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!

[@Tobiasargs]

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

[@josegarrido2905]

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

[@midulive]

Gracias! 😍

[@JoseAntonio-ve1ff]

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

[@AdeBi888]

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!

[@yordanbb98]

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

[@johnygargano8054]

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

[@Wilfer_Suarez]

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

[@claraegeamartinez9343]

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.

[@esaulurielmenesestorres4360]

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

[@fontanero]

Muchas gracias por emplear tu tiempo en enseñarnos.

[@turkoquete1234]

Thanks!

[@midulive]

Muchas gracias por tu aporte amigo!!!! :)

[@joshuarosales_p]

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

[@user-tr1xr6gv8p]

Eres un genio explicando. Mil gracias. 😀

[@animationdesing068]

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

[@midulive]

Gracias a ti!

[@AnaWilliams-wg9tr]

Ufff me exploto la cabeza.. entendí perfecto. Gracias Midu :D

[@totito888]

que buen video...esto es todo lo que se necesita no solo para empezar(como yo), sino para reforzar! además de ser claro en la explicación, me sirvieron las herramientas que usas para hacerlo, code.link no la conocia, grid garden como práctica es excelente...que buen trabajo, tienes un nuevo sub obviamente

[@vruno182]

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

[@Rhast-zi6my]

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

[@darkgames5996]

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

[@midulive]

Excelente!

[@martinle855]

Gran Video Midu! Mil gracias, se entendió muy bien! Queda practicar ahora jajaja

[@gabrga26]

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

[@gonzaabenitezz]

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

[@midulive]

Excelente!

[@eduardobarrueto5738]

Muy bien explicado!! al fin entendí grid...🥲

[@wayelias]

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

[@RodrigoOsO87]

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

[@marcecam747]

la mejor explicacion de grid que vi gracias!

[@stevenquihuire3523]

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

[@midulive]

Un placer! 😊

[@xxd4m4s0_ytxx9]

Gracias, me sirvió de mucho ❤

[@cristianlopez5853]

Excelente la explicacion , muy claro todo, felicitaciones

[@jonnathangonzalez8639]

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 😢

[@gladysr7935]

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

[@SonGoku-pc7jl]

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

[@claudionatsa]

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

[@midulive]

Gracias a ti!!

[@juancampos352]

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

[@ertes7379]

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

[@criptamas]

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

[@dailinromero_]

Te amo! Me has salvado la vida

[@CoCold]

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

[@albertolopez8489]

Gran explicación, enhorabuena por tu trabajo

[@federicomontenegro218]

Tremendo video, entendi todo de una!

[@yaneriscabrera6995]

El grid-template-area me explotó la cabeza

[@playmambo9573]

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

[@jonnathanbaculima4447]

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

[@misaseptimo]

ya no quiero llorar mas, este es mi curso

[@frangilgon]

ese span 2 acaba de salvarme ya para siempre

[@intercambioradial]

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

[@devweb-su8iq]

me has alegrado el dia gracias

[@midulive]

¡Un placer!

[@GabrielPozo]

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

[@david_tojo]

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)

[@devsantiago]

Tengo una pregunta. ¿No funciona como se quiere o no se sabe usar en su totalidad?

[@david_tojo]

Ocupa más espacio del deseado (más del 100%) y tienes que hacer cálculos@@devsantiago

[@elliotgaramendi]

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;

[@juang4u]

Gracias por sus clases estan muy buenas

[@GHerosVNZ]

gracias bro , gran video explicas muy bien

[@Raymond_75]

muy bueno ... espero mas videos !!!

[@CarlosEduardoPalomoSerna]

Gracias por todo mindu eres grande 😁

[@diegovieramartinez2395]

Muy buenos videos , aprendo muchísimo

[@federicofernandez5338]

Grande miduuu!! Saludos desde Argentina.

[@enriqueruiz320]

Justo lo que ando buscando 😍

[@DavidRodriguez-uj4ls]

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!

[@midulive]

Gracias!

[@RoronoaSablecorte]

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

[@ferrcode1]

Excelente, midu. Muchas gracias :)

Muy buena explicación!!!

[@lacacode]

Espectacular la parte de Areas

[@juliolinarezescobar]

A guardarlo en favoritos

[@FabianGrajales3D]

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

[@pabloduarte4470]

Estos vídeos me dan la vida

[@mostcommunityofficial]

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

[@LlegoManuel]

Genial, ya puedo centrar un div de 3 formas distintas

[@andresmarrugo765]

que pasada, muchas gracias midu!

[@anaalcantara7465]

Me encanto ese vídeo 😍

[@Zebastian2307]

gracias, me fue de muuuuuuuuucha ayuda!

[@midulive]

Excelente!

[@benjamin.2957]

me agrada tu contenido sos capo y en español

[@mauricioutrera2561]

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

[@tatat104]

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

[@dandres21]

Excelente como siempre! 😜 ❤❤

[@fraineralex]

Eres el mejor midu! ❤

[@JeffreyDeveloperCOL]

Gracias midu! Pude entender perfectamente minmax

[@midulive]

Excelente!

[@theredmaster_superbee]

Una pregunta, en el 24:27 ¿Cómo puedo hacer que el elemento número 7 llene toda la fila cuando se desplaza a un row implícito o explícito? ¿Cómo podría controlar el ancho de cada elemento que salta a un row abajo... Por ejemplo que quisiera que el elemento 6 llenará 20% y el elemento 7 el resto en 1fr.... ¿Se puede controlar eso? Gracias por este gran tutorial, aprendí Mucho.

[@magadiflo-dev]

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.

[@jhonyrobles4544]

Recuerden enviarle un Thanks los que puedan! sale mas barato que un curso en Udemy ;) Apoyenlo!

[@SanchayanPackiyanathan]

Gracias Amigo!!!!! Saludos,

[@cristiangalluccio4320]

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

[@elliotgaramendi]

Mejor es combinarlo donde corresponda, salvo que tengas un componente chiquito, pero si es chiquito apostaría que el 99% de casos que se debe usar es flex, si es para layouts grid es god.

[@cristiangalluccio4320]

@@elliotgaramendi estamos trabajando con arquitectura de microfrontends, más bien con single SPA. Vamos a implementar grid porque nos facilita diseñar y estructurar los componentes que tenemos que presentar. Gracias por tu comentario y recomendacion!

[@elliotgaramendi]

@@cristiangalluccio4320 Toda la razón! Para layouts grid es god! pensé que te referías que en todo tu proyecto usarías solo grid. Dentro de estos componentes habrán otros componentes que si requerirán flex o eso entiendo.

[@cristiangalluccio4320]

@@elliotgaramendi en definitiva si, vamos a estar combinándolo. Lo traía a colación porque en el proyecto anterior que era más pequeño usamos solo flex box y tuvimos bastante trabajo con mediaqueries personalizadas

[@elliotgaramendi]

@@cristiangalluccio4320 oh entiendo, desde que uso auto-fit o auto-fill ya no uso medias son God! y en flew el wrap, te doy testimonio! y tal vez el auto-column o el auto-row te apoye. pero con los primeros me he hecho todas mis webs.