Aprende CSS Grid MUY FÁCIL con ejercicios

Domina CSS Grid con nuestro curso para principiantes. Aprende a crear diseños web flexibles y atractivos en minutos de forma muy fácil con ejercicios prácticos
¡Inscríbete ahora y desata tu creatividad en el diseño web!
▶ No te pierdas más directos en: www.twitch.tv/midudev
00:00:00 - Intro
00:00:33 - Codember
00:01:03 - Introducción a Grid
00:03:29 - A mover las manitas
00:03:58 - Qué es Grid?
00:06:39 - Características de Grid
00:07:55 - Grid vs Flex
00:10:02 - Grid en código
00:11:31 - Nuestra primer Grid
00:17:01 - Creando más columnas
00:17:48 - Unidad especial
00:24:07 - grid template rows
00:25:55 - Cuadricula vacia
00:27:36 - Filas automaticas
00:30:11 - Propiedad repeat()
00:32:00 - Nadie sabe esto sobre el REPEAT()
00:35:01 - Ejercicio practico Excel (recomendado)
00:43:28 - Que no hacer
00:44:44 - Ejercicio
00:50:47 - Auto-fill auto-fit
00:54:32 - Diferencia entre auto-fill y auto-fit
00:57:41 - margin o gap?
01:00:06 - Líneas de la cuadricula
01:01:49 - grid-column-start/end
01:04:02 - grid-row-start/end
01:06:15 - Atajo más simple de grid-column/row
01:10:54 - Bloques encima de otros
01:15:43 - Creando un Layout
01:20:23 - Grid áreas
01:26:52 - Alineación en línea de los elementos
01:30:42 - Alineación en bloque
01:32:29 - Centrar el contenido
01:36:11 - 3 formas de centrar un div

[@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]

🤣

[@user-dw1hn4bk7o]

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

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

[@stevenskl5294]

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

[@joshuarosales_p]

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

[@yordanbb98]

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

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

[@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

[@TheReycel75x]

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

[@midulive]

Gracias a ti!

[@TobiasLotter]

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

[@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

[@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

[@criptamas]

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

[@RodrigoOsO87]

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

[@user-tr1xr6gv8p]

Eres un genio explicando. Mil gracias. 😀

[@Rhast-zi6my]

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

[@RoronoaSablecorte]

Que buen contenido Midu, explicas muy 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

[@intercambioradial]

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

[@marcecam747]

la mejor explicacion de grid que vi gracias!

[@jorgelezcano6638]

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

[@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

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

[@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

[@SonGoku-pc7jl]

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

[@albertolopez8489]

Gran explicación, enhorabuena por tu trabajo

[@fontanero]

Muchas gracias por emplear tu tiempo en enseñarnos.

[@cristianlopez5853]

Excelente la explicacion , muy claro todo, felicitaciones

[@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! 😍

[@jonnathanbaculima4447]

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

[@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

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

[@GabrielPozo]

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

[@playmambo9573]

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

[@danieldelgadopalacios1352]

Excelente como siempre! 😜 ❤❤

[@juancampos352]

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

[@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

[@xxd4m4s0_ytxx9]

Gracias, me sirvió de mucho ❤

[@GHerosVNZ]

gracias bro , gran video explicas muy bien

[@federicomontenegro218]

Tremendo video, entendi todo de una!

[@CoCold]

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

[@dailinromero_]

Te amo! Me has salvado la vida

[@gonzaabenitezz]

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

[@midulive]

Excelente!

[@andresmarrugo765]

que pasada, muchas gracias midu!

[@enriqueruiz320]

Justo lo que ando buscando 😍

[@fercho1820]

Excelente, midu. Muchas gracias :)

[@user-sn6ss3dm1m]

Gracias por todo mindu eres grande 😁

[@juang4u]

Gracias por sus clases estan muy buenas

[@johnygargano8054]

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

[@FabianGrajales3D]

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

[@federicofernandez5338]

Grande miduuu!! Saludos desde Argentina.

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

[@mostcommunityofficial]

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

[@jairgh5351]

El mejor ❤, gracias!!

[@jairocolondev]

Vamasssss Midu 🔥🔥🔥

[@kikevanegazz325]

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

[@midulive]

Gracias a ti!

[@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

[@iknowwhattodo111]

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

[@fraineralex]

Eres el mejor midu! ❤

[@pabloduarte4470]

Estos vídeos me dan la vida

[@SanchayanPackiyanathan]

Gracias Amigo!!!!! Saludos,

[@ferge1313]

Gracias mil!!

[@tatat104]

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

[@yeinerdavidpajarootero3205]

Gracias Midu!

[@alexbo1942]

eres el GOAT 💯

[@animationdesing5771]

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

[@midulive]

Gracias a ti!

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

[@LlegoManuel]

Genial, ya puedo centrar un div de 3 formas distintas

[@onijimoon]

Gracias Midu 🎈

[@Zebastian2307]

gracias, me fue de muuuuuuuuucha ayuda!

[@midulive]

Excelente!

[@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

[@lacacode]

Espectacular la parte de Areas

[@cabesonsinz]

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

[@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

[@lucianodeniro6475]

muchas gracias

[@juliolinarezescobar]

A guardarlo en favoritos

[@gustavogomezvillafane5142]

muy muy bueno!

[@yankluf]

Graciassssssss!!! 🔥🔥🔥

[@diegosalgado6258]

crak me ayudaste un monton

[@jorgerosbelcruzarias3026]

Super útil. 🫂

[@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 😢

[@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

[@misaseptimo]

ya no quiero llorar mas, este es mi curso

[@MultiTelefono]

Gracias midu! Pude entender perfectamente minmax

[@midulive]

Excelente!

[@benjamin.2957]

me agrada tu contenido sos capo y en español

[@user-om8gj7gl8c]

Excelente!!!

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

[@mariabelenlencina2549]

El mejor!!

[@midulive]

😍😍

[@never_die2285]

vamos a aprender :D

[@juanfdx]

Fantastic! ✌😁✌

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

[@turkoquete1234]

Thanks!

[@yamid-dev]

Gracias

[@stevenquihuire3523]

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

[@midulive]

Un placer! 😊

[@frangilgon]

ese span 2 acaba de salvarme ya para siempre

[@galletasniper2584]

Graciasss

[@yaneriscabrera6995]

El grid-template-area me explotó la cabeza

[@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?

[@MitosdeArkovia]

Tambien se pueden usar areas.

[@claudionatsa]

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

[@midulive]

Gracias a ti!!