Aprende CSS Grid MUY FÁCIL con ejercicios
Вставка
- Опубліковано 2 сер 2024
- 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: / 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 - Наука та технологія
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
🤣
Ya sabia grid pero ma ayuda a recordar y no olvidarme de cosas esenciales.
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 UA-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!
Este contenido es oro!!! Mil gracias. Eres muy bueno explicando y enseñando.
Gracias a ti!
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
Enserio te agradezco vale la pena ver los videos completos explicas como ninguna otra persona, saludos 🎉
Grande midudev me ayudaron bastante estos videos para terminar de repasar CSS. Muchas gracias por el contenido.
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!!
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
la mejor explicacion de grid que vi gracias!
Que buen contenido Midu, explicas muy bien! Gracias !!
Eres un genio explicando. Mil 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
Sin duda este video es lo más importante desde que empecé a estudiar programación, debería ser material obligatorio
Ídolo, pasó volando la hora! Me estoy pegando una maratón con tus videos. Sos un capo explicando.
Gran explicación, enhorabuena por tu trabajo
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
que divertido es reaprender css contigo midu! sigue porfavor! xD gracias mil!
Midu, te has lucido con tus últimos en-vivo. Muchas gracias.
Gracias a ti!
Muchas gracias por emplear tu tiempo en enseñarnos.
Genial Video Amigo en cuanto pueda me veo los anteriores videos que mencionaste , Genio muy bueno ! bien Explicado!
gracias bro , gran video explicas muy bien
que pasada, muchas gracias midu!
Justo lo que ando buscando 😍
Gran Video Midu! Mil gracias, se entendió muy bien! Queda practicar ahora jajaja
Excelente la explicacion , muy claro todo, felicitaciones
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
Buenísimo el video y la explicación, te has ganado un nuevo suscriptor!!
Tremendo video, entendi todo de una!
Gracias, me sirvió de mucho ❤
Gracias por todo mindu eres grande 😁
Te amo! Me has salvado la vida
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!
Excelente como siempre! 😜 ❤❤
¡¡¡¡¡❤Muchas gracias por tu labor educativa!!!
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
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!
Gracias por sus clases estan muy buenas
Midu mil gracias por este curso. Increíble explicación de grid, actualizada y muy resumida
Gracias mil!!
WOW! Al fin entiendo Grid, ahora voy a por el de Flexbox 💪
Gracias Midu!
Saludos midu..! Gracias por tu contenido saludos desde Ecuador amigo..! Que sigas adelante en tus proyectos personales, eres un tipaso..!
Excelente!!!! La demostración de auto-fill comparando con la web de la Kings League es muy buena.
Gracias Amigo!!!!! Saludos,
literal necesitaba esta guía/tutorial de grid para una entrega. ¡Graciasss!
Excelente!
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
Hoy aprendí
y amé
y me gustó
y entendí
y abracé
...grid
Excelente, midu. Muchas gracias :)
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.
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! 😍
Lol justamente esta semana en clase han empezado a enseñarnos grid. Jajajaja muchas gracias por el video :D
Gracias Midu 🎈
Grande miduuu!! Saludos desde Argentina.
Estos vídeos me dan la vida
El mejor ❤, gracias!!
Vamasssss Midu 🔥🔥🔥
Eres el mejor midu! ❤
muchas gracias por el contenido mas claro no puede ser!!! podrias algun dia hacer esto mismo con tailwind? muchas gracias!
Graciassssssss!!! 🔥🔥🔥
muchas gracias
crak me ayudaste un monton
eres el GOAT 💯
gracias, me fue de muuuuuuuuucha ayuda!
Excelente!
Espectacular la parte de Areas
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...
Gracias midu, justo lo que necesitaba para actualizar mi web con puro Flex 😂
Super útil. 🫂
A guardarlo en favoritos
muy muy bueno!
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
Buenísimo, antes pensaba que grid era súper complicado, y es más fácil de lo que creía jajaj
Excelente!
شكراً جزيلاً وجزاك الله خيراً ❤
Midulive, esto de las CSS GRID es: MA-RA-VI-LLO-SO. gracias por enseñarnos esto.!
Gracias a ti!
Genial, ya puedo centrar un div de 3 formas distintas
ya no quiero llorar mas, este es mi curso
Thanks!
Grande midu gracias por los videos que sera lo siguiente de esta serie ? responsive desing ?
Excelente!!!
ese span 2 acaba de salvarme ya para siempre
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 😢
me agrada tu contenido sos capo y en español
Gracias midu! Pude entender perfectamente minmax
Excelente!
Graciasss
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.
vamos a aprender :D
Gracias
Fantastic! ✌😁✌
Gracias por existir
Gracias por todos estos cursos, ahora seguire estudiando gracias por la iniciativia.
Un placer! 😊
ManzDev esta muy pro en CSS, y en JavaScript, no solo sus Directos en el YT morado y su UA-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.
vine a YT a buscar bronce y encontre oro!!
Que bien explicado!!! Exelente video Midu!!!!!! Gracias!!!!!!
Gracias a ti!!
El mejor!!
😍😍
El grid-template-area me explotó la cabeza
Eres genial explicando, muchas gracias!!!
En el momento: 1:15:54 editor: layout Quisiera tener habilitado eso en mi visual ¿Cómo se hace?
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.