Maquetado responsive con CSS Grid | Diseño adaptativo
Vložit
- čas přidán 1. 08. 2024
- ✅ Contenido:
✔ Maquetación de una página web responsive usando CSS Grid.
✔ Uso de grid-template-columns, grid-template-rows y grid-template-areas.
✔ Uso de la propiedad grid-template y media queries para crear maquetados específicos para cada dispositivo.
A diferencia del CSS flexbox que está diseñado manejar una sola dimensión ya sea horizontal como vertical, CSS Grid nos posibilita diseñar grillas donde podemos manejar tanto las filas como las columnas (2 dimensiones).
📺 Videos relacionados:
Galería de imágenes responsive usando CSS GRID: • Galería de imágenes re...
CSS GRID | Guía completa DESDE CERO: • CSS GRID | Guía comple...
👀 Les sugiero pongan el video en 1080p para que puedan ver el código con nitidez.
👍 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
czcams.com/users/yoelvism?sub_...
🐤Sígueme en twitter:
/ ymulenll
📌Enlaces:
Código fuente:
github.com/ymulenll/css-grid-...
Muchas gracias por ver este video, espero le haya sido útil.
#css #grid
dios mio una vida peleando para que los elementos me tomaran todo el height de la pagina, videos de horas, tutoriales x demás hasta que llegue aca, genial
mismo caso jejeje
LIteralmente sigo sin creer que es real poder hacerlo de esta manera tan facil, videos de HORAS, en serio MUCHAS HORAS y solo renegaba con los width, los height y demas, no se, te amo uwu
Es increíble como este video supera y arraza a todos los profesores vuelteros y rebuscados que pueden saber mucho y explican para la mismísima miércoles gastando 3 horas para que nadie entienda nada. Por miles de videos como este 🎇🎆🎇🎆
X2
@@jonathansanso5900 El desastre es cuando intentas poner cajas de texto etiquetas o usar formularios no pude!!!!!!
Una explicación tan simple, y otros profesores lo explican muy difícil hasta te pierden
Gran trabajo Yoelvis, mil gracias siempre por compartir con nosotros tus contenidos y toda la experiencia de la programacion frontend y backend, saludos!
Justo lo que estaba buscando, súper claro explicado y directo al tema. Muchas gracias!
Genialmente explicado y breve, rápido, una maravilla. Enhorabuena
Hermano mereces muchos más suscriptores y vistas, realmente enseñás muy bien! es el mejor tutorial de grid que vi y eso que miré cientos
Explicación super clara, concisa y completa.
Muchas gracias!
La facilidad, con la que explicas cada propiedad. Un maestro 🙌
Hasta ahora este es el mejor tutorial que veo relacionado con CSS Grid 👍👍👍
Súper genial muy útil, breve y precisa la información.
Se nota la experiencia, gracias por compartir tus conocimientos
El mejor tutorial de grid. Felicitaciones!
De todos los videos que e visto, Tu explicas de una manera super clara y concisa sin dar muchas vueltas al asunto! Magnifico de verdad!
El mejor tutorial que he encontrado, estoy flipando que sea tan simples.... muchas gracias y un feliz año.
Gracias amigo, este video tiene mucha calidad, y la forma en como lo explicas es demasiado buena, que grande.
Transmites mucha alegría por compartir. Motivas mucho.
Estoy arrancando con esto del diseño web y la verdad un gusto encontrar este video! Es justo lo que necesitaba y lo explicas de una manera super sencilla. La verdad, un crack!
El mejor tutorial de css grid que eh visto, tienes mis respetos.
Perfecto. A veces no es lo que sabes, sino como explica, lo haces bien y sencillo de entender. Gracias
Wow! acabas de abrir un nuevo mundo para mi!! eres muy bueno explicando, gracias por tu contenido!
El mejor video de Grid que vi hasta ahora! muchas gracias
Muy buen contenido , un verdadero aporte , algo distinto a lo que se muestra habitualmente. Muchas gracias !!
Master ud hace que todo sea facil y claro. Imposible no aprender con sus clases. Monstruo...éxitos en el canal
Escelente video! muy claro, al grano y con información muy valiosa...he pasado muchas horas intentando darle forma a mis estilos y este video me hizo todo mucho más rápido.
Muy bien explicado, se entiende bien y me gusta que hayas explicado lo de grid-template con las medidas row y colum incluidas, es la primera vez que lo veo en varios tutoriales, un saludo!
De tantos tutoriales que había visto, este fue el único que me ayudó, fácil, rápido, y al grano. Muchas gracias por compartir tu conocimiento. Nuevo suscriptor :D.
Gracias por compartir tu conocimiento, te he descubierto en este video y ya estoy suscrita, increíble lo fácil que explicas Css Grid, me encanta como lo has explicado. Gracias de nuevo! Un saludo desde Sevilla.
Impresionante tu capacidad para explicar, este video es muy valioso para comprender css
Super Genial.
Fue pragmático, en un lenguaje limpio y entendible.
Muy simple de entender, muy práctico y muy prolijo. Gracias!!!
Excelente forma de como explicas el funcionamiento de CSS Grid, vengo de ver tutoriales de otros programadores y tu vídeo es por mucho el mejor. Gracias por compartir tus conocimientos 🙏🏼
Uauu encontre la luz, venia de varios tutoriales buenos y muy buenos. Pero no se, haciendo el tuyo me funciono todo. Felicitaciones Yoelvis!
Gracias amigo por esta manera tan sencilla de entregar este tutorial tan grandioso. Me sacó de un apuro muy grande. Que Dios lo bendiga.
Muy claro y sintético para explicar!! Muchas gracias
¡INCREIBLE! Un tutorial bastante sencillo y fácil
Excelentísima explicación! Concreta y pedagógica. Suscrito
El mejor tutorial de grids que vi, horas viendo videos y aca en 13 minutos lo explico a la perfección.
La mejor explicación de como hacer un layout con grid que me he encontrado, gracias.
De esta forma lo veo tan, pero tan sencillo que casi no me lo creo, muchas gracias por el contenido, me ha sido de mucha ayuda
Gracias siempre me costó entender Grid y con este video se me hizo súper fácil !!!!!
El mejor de casa grid que e visto, muy entendible
Uno de los mejores tutoriales que he visto y fácil de entender. Muchas gracias, lo necesitaba urgente.✌🥺
Gracias
El vídeo más preciso y consiso. 👏🏽
Muy buen tutorial, muy clara la información y la locución prolija. Me gusto el estilo, bien académico.
Iluminaste mí proyecto. Descubrí tu video gracias a CZcams y ahora estoy reformulando mí portafolio. La forma ultra sencilla que explicaste para dar forma a la página es genial. Ya estoy aplicando. Y obvio ya me subscribi. Saludos desde Argentina!
Simplemente ,impresionante...tantas formas de hacerlo y venis con este video a explicarlo de una manera tan practica, entendible y visible que enseguida se convierte en el mejor metodo a utilizar! Gracias por obsequiarnos esto
De corazón te agradezco por el tuto rápido y eficiente. Te ganaste un fan/subs. Abrazo desde Argentina.
Lo haces ver tan fácil! increíble ♥
El maestro lo explica muy bien 👏🏻👏🏻
Aprendí en nada de tiempo Grid jajaja y yo viendo videos de como 1 hora y era tan simple. Muchas gracias! Ya me suscribí ! :D
Dios mio que facil hiciste ver esto, he visto muchisima cantidad de videos y he probado y fallado una y otra vez con este tema, y contigo lo entendi tan facil como sumar eres un grande de verdad
MUCHISISISIMAS GRACIAS
amigo muchas gracias, soy venezolano y he iniciado este camino de la programación hace poco tu video es de muchísima ayuda para los que queremos tomar este camino a una vida mejor
Excelente información Yoelvis, muchas gracias.
Amigo, muuuucchas gracias por este video, llevaba mas de 4 días buscando en la red una manera de maquetar una web, soy de la vieja escuela programando y todavía tengo la estructura mental de maquetar con tablas, esto me orientó de manera ideal para saber donde estoy parado a la hora de plasmar mi código y lo mas importante es que flexbox y me ocupa el 100% del hight de menra automática... ya tienes un seguidor mas. Mil gracias
Muy bueno, simple y conciso, te felicito por el tutorial.
Por FA VOR, buenísimo el video la verdad, 100/10. Felicidades por hacer un maquetado tan pero tan simple.
buenisimo el video, soy desarrollador fullstack hace 7 años y vine del backend....este grid siempre ha sido mi nemesis, pero con este tipo de videos entiendo mucho mejor
woow!! también soy de las que andaban de canal en canal y todo lo que vi era muy tedioso, enredado, largo y por lo tanto cansado, he de confesar que fue el último video que habia decidido ver antes de darme por vencida, un video 100 de 100 , buena explicación fácil digerible sin tanto rodeo, limpio y corto. Maestro nato gracias muchas gracias por hacerme ver que no era tan enredado y devolverme el entusiasmo de seguir aprendiendo. Ahora quiero ver todos tus videos🙂que este sea un grandioso año!!!💫
Muchísimas gracias, Yoelvis!! Realmente no encontré, entre todos los videos que miré (y creeme que fueron muchos), explicación tan sencilla y directa como la tuya. Encima, como si fuera poco, compartís tu código para que uno lo pueda repasar, masticar y así ir grabando bien a fondo los conocimientos. Infinitas gracias y, por supuesto, me acabo de suscribir a tu canal. Abrazo grande!!
WOW, estoy aprendiendo a usar css y vengo de una pagina web muy conocidadonde te enseñan desde cero a programar en css, pero nunca llegaron a este nivel. INCREIBLE!!! Muchas gracias por enseñarnos! :)
Muy interesante y clara la explicación. Gracias por compartir.
El mejor tutoría de css gris responsive, fácil, rápido y al tema, sigue así :p
la verdad que mas claro imposible!!!!!! excelente, muchas gracias
Increíblemente fácil, dicen que la inteligencia es convertir lo difícil en fácil, gracias por tan excelente video.
Excelente tutorial, no pudo ser más fácil la explicación...Ahora entiendo como aplicar el grid. Gracias por compartirlo.
Gracias , la mejor explicación que he visto , excelente
Gracias, lo explicaste de una forma sencilla y clara. Muy útil
Lo máximo este sistema amigo. Ayuda mucho a mi que revien estoy empezando....
Espectacular. Me encanto con cuanta facilidad lo hiciste. Me viene excelente para mi trabajo! Te super agradezco, continua con estos tutoriales.
Gracias Alexei, que bueno que te sirvió el titorial
Mas claro imposible , agradecido don Yoelvis.
Suscrito! muchas gracias por el aporte y como dice Alan más abajo, que gustazo el poder ver un tutorial tan corto y conciso como el que muestras aquí, enhorabuena y sigue así!
Muchas gracias por suscribirte, que bueno que te gustó el tutorial, saludos
Excelente, estoy haciendo un curso y me saqué un montón de dudas con tu video. Super claro, conciso y sencillo de ver
Te felicito!!!
Impecable! ...Gracias Yoelvis saludos de un venezolano en argentina!
Muy claro y sencilla la explicación... Gracias
Excelente y muy práctico de implementar - Gracias
Excelente explicación, bastante claro y puntual
Excelente, muy preciso y claro.
Excelente aportación, antes era relajo maquetar y ahora con esta herramienta es muy agradable y fácil. Gracias!!!!
Gracias Yoelvis, maravilloso tutorial. Estamos aprendiendo mucho contigo. Bendiciones.
Exelente video ,queria comenzar a agregar grid a mis desarrollos web y se ve genial la herramienta
Gracias por ese aporte, nos ayudas mucho con toda esa explicacion y nos saca de dudas. mil gracias, Dios le Bendiga
Excelente video y explicación, muchísimas gracias. Saludos desde Aguascalientes!!
Maravilloso! Gracias por compartir!!!
Que maravilla de video, muy bien explicado, codigo limpio y una excelente calidad.
Es realmente increíble!!! Muchas gracias!!!!
Me salió en recomendados y fue lo mejor que pude ver ♥️
Que impresionante lo que otros tratan de explicar en horas, me acabo de suscribir y estaré al pendiente
Muchas gracias, me alegra mucho tu comentario, próximamente estaré subiendo nuevos videos 🙌
ufffff genial no entendía del todo el GRID pero gracias a Dios encontré tu vídeo fue de bendición Dios te bendiga y gracias por compartir tus enseñanzas que se te multipliquen al 1000%
te haz ganado un suscriptor, excelente forma de explicar el uso de grid
Soy el like 3030!!!
Sigue así, un excelente tutorial para las personas novatas en programación CSS. Muchas gracias por tus enseñanzas.
Qué genio! Gracias por el aporte!
Amigo eres el mejor, en menos de 15 mins explicaste mejor que muchos tutoriales de 2 horas, gracias.
Ufff genial super rápido y puntual. Gracias!
Gracias por la simpleza con que es explicas, me motivaste a probar maquetear... Muchas gracias amigo
Te pasaste con los tutoriales de css grid y flexbox, muy bueno.👏
el mejor tutorial que he visto, muchas gracias
Sencillamente expectacular..!
hola, quiero felicitarte que buena explicacion el unico video que verdaderamente funciona de entre miles que revise para poder entender este tema, solo me queda la tarea de ajustar mi grid con solo 2 columnas y 2 filas para un trabajo que estoy realizando, en verdad mauchas gracias y felicitaciones
Excelente el video! me despejó muchas dudas que tenia, MUCHAS GRACIAS !!
Excelente video maestro!! Muy claro y efectivo. Muchísimas gracias!!
Maravillosa explicación