Aprende CSS Grid Layout en 15 Minutos 📗

⭐ Aprende todo de CSS y Grid aquí 👉 victorrobleswe...
⭐ Aprende CSS3 Avanzado aquí 👉 victorrobleswe...
🔥 Suscríbete: kzbin.info...
🎓 Cursos online de desarrollo web: victorrobleswe...
📰 Blog: victorrobleswe...
📧 Newsletter: victorrobleswe...
📷 Instagram: victorrobleswe...
📑 Facebook: / víctor-robles-web-1460...
🐦 Twitter: / victorobs
👨‍💼 LinkedIn: / victorroblesweb
🎵 TikTok: / victorroblesweb
🧢 Mi gorra: amzn.to/2lDH1wv
💻 Mi PC: amzn.to/2EloEpT
⚒️ Mi setup: bit.ly/2LsY1oj
🌐 Hosting que recomiendo 👉 victorrobleswe...
🖥️ Servidor VPS recomendado 👉 victorrobleswe...
(Cupón de descuento extra para ambos: VICTORROBLESWEB)
👕 Mi ropa con diseños geek originales 👉 bit.ly/2xObr5f 👕
Aprende lo fundamental de la maquetación web con CSS Grid Layout. El lenguaje de hojas de estilo más usado, más estándar y más demandado actualmente que nos permite dar estilos y forma a una web. Te enseñaré como usar Grid, la nueva forma revolucionaria de maquetar sitios web basada en una cuadricula altamente modificable y mucho más. Todo en 15 minutos, desde cero y paso a paso.
Espero que te guste mucho el vídeo 😄
Aprende más en mi blog: victorrobleswe...
#victorroblesweb

[@VictorRoblesWEB]

⭐ Aprende todo de CSS y Grid aquí 👉 victorroblesweb.es/master-css ⭐ Aprende CSS3 Avanzado aquí 👉 victorroblesweb.es/master-css-avanzado

[@brunodherrera]

te recomiendo browser-sync, no solo porque refresca el navegador de la pc en la que estas ejecutando browser-sync, sino que si tambien entras al localhost desde el movil (obviamente ya no seria localhost, sino la ip con puerto, de la pc) también te lo refresca, asi que simplemente dejas el telefono en el escritorio y puedes ver ambas pantallas como se refrescan, la version desktop y la version movil cuando la estés desarrollando

[@yaredguerrero8742]

Gracias!!!!((

[@ronaldorodriguez7463]

No me sale en vdcode esa extensión

[@AlejandroSanchez-ls4hh]

Para trabajar están bien esas herramientas, pero para este video a mí me parece más interesante que haya que refrescar manualmente, así se ve el cambio cuando pulsa el botòn...

[@ArielFalcón-n7x]

Genial el curso, super resumen. Me gustaria agregar que al final grid-template-areas, grid-template-rows y grid-template columns se puede resumir aun más en: grid-template: "header header" 1fr "sidebar main" 2fr "footer footer" 1fr / 1fr 2fr; En este caso cada fracción despues de las palabras es el ancho de las filas (teniendo en cuenta que los conjuntos de palabras definen cada uno la disposición de una fila, y al final luego de la / estan los anchos de las columnas. esto es el equivalente a: grid-template-areas: "header header" "sidebar main" "footer footer" grid-template-areas: 1fr 2fr 1fr grid-template-columns: 1fr 2fr PD: fr significa fracción y de esta manera puedes dividir alternativamente al % la grid en fracciones

[@migueldiazriveaux7442]

El mejor video en español de CSS GRID que he visto hasta ahora muy sencillo de entender.

[@andresbetag]

Saludos desde Colombia Víctor muchas gracias. Me encantan este tiponde videos, director al tema y sin tanto hablar. Muy completo Gracias nuevamente. .

[@themike874]

Gracias rey, me estaba confundiendo de algunos conceptos de grid

[@Mantycora]

Es increible como entendi en menos de 5 minutos con tu video q con una clase de 2 horas, muchísimas graciasss!!!

[@VictorRoblesWEB]

Pues imagínate si tomas este curso conmigo victorroblesweb.es/master-css-avanzado

[@jaimeusugaosorio7306]

Muchas gracias por el gran aporte que haces Víctor al compartir tus conocimientos. Acá estoy iniciando con todo tu contenido. Un saludo desde Medellín Colombia.

[@euyin77]

Acaba usted de resolver un problema de maquetado que me daba muchos dolores de cabeza. Y en un video de 15 minutos!

[@nas3440]

Muy buena explicación quedó muy claro todo, me costaba comprender en su totalidad el grid pero ya estoy mas seguro de usarlo, gracias por el video.

[@BastianAlexanders]

Excelente explicación Victor, primera vez que veo uno de tus videos y claramente me veré el de maquetación con grid layout. Me ayudaste mucho a comprender sobre el css grid viniendo del uso clásico de flexbox de mi parte. +1 suscriptor, saludos!

[@joecolas]

excelente explicacion @Victor Rubles. Ahora entiendo grid.

[@eduardoricardez4123]

sin duda a ti te he entendido lo que has explicado; muchas gracias.

[@matiaselsilva]

gracias lo que me costaba entender Grid, explicaste muy bien capo

[@VictorRoblesWEB]

Aprende todo de CSS3, CSS Grid Layout y Maquetación web aquí 👉 victorroblesweb.es/master-css

[@704k0]

Fua viejo tengo déficit atencional y por primera vez me veo un video completo sin pausar y entendiendo todo a la primera. Llegué a decir "wow ya terminó?". Toma tu like y sub de una.

[@bot6731]

venia trabajando en vba haciendo interfaces de usuario ,porque te permite ver bases de datos, controles activex, diseño lógica,POO,etc. No es potente, mucho menos seguro, pero viene bien cuando desarrollas algo casero, y rápido de distribuir . Hace poco eh decido aventurarme en el desarrollo web, y este minitutorial de grid cae bien cuando quieres aterrizar cosas que ya venias haciendo en otros lenguajes.

[@sakrosark5024]

Esta muy bueno, súper entendible me recuerda a las matrices, rápido pero si se va viendo varias vezes el video o lo que se busca esta perfecto es un buen resumen

[@bauverburg1524]

loco la verdad que me has salvado un monton de veces jajaj tkm

[@marcoantonionunezcosinga7828]

Gracias por la forma tan practica y simple de explicar

[@estebanmorgade6147]

Un capo, justo tengo que hacer un maquetado en mi laburo y esto me vino como anillo al dedo. Gracias Victor!

[@OulidenReudaL]

Muy buena explicación 💯

[@jorgeantoniotorres]

Muy bueno, gracias.

[@loliguerrero]

Hola! Me has ayudado mucho. Por fin puedo tener una estructura decente en mis proyectos. Muchas gracias💜

[@nidiastefan8150]

Gracias Víctor, muy fácil de entender, y muy útil. !Gracias!

[@variniaep3483]

Hola! Yo aprendí todo esto usando bootstrap,,, ¿crees que ya sea obsoleto o anticuado y debiera meterme a grid-layout y/o flex-box??? 🤔

[@ninahernandez956]

Muchas Gracias...!!!🙌

[@pablochavez8593]

Muchísimas gracias Víctor, me ayudo muchísimo a terminar de entender el tema.

[@joserobles3582]

Excelente explicación del uso del grid. Gracias.

[@illiantes6955]

Este man es un capo para explicar

[@antonyrab]

Muy buen video Victor sos un crack... Tengo una consulta, si a su vez por ejemplo en el div del menú tengo más divs anidados y quiero controlarlos con grid css al div menú le tengo que colocar display: grid de vuelta?

[@juanmanuelfrancolaporta4313]

Muy bien explicado Victor, Muchas gracias!

[@mpassionnote]

¿Qué es mejor, hacer una pagina web responsiva o hacer versión de ordenador y versión para celulares?

[@paomos1139]

Gracias gracias gracias ❤

[@cesarcortes8242]

Muchas gracias por esta explicación, estuvo genial.

[@lilyack153]

Me ha ayudado mucho sobretodo el grid area de locos,gracias

[@MartinExequielFuraca]

Consejo y crítica, cuando alguien dice Grid en 15 minutos, no es necesario explicar como crear los archivos, como hacer un link de css con html y todo eso, es explicar Grid nada más. De lo contrario te haces un video aparte dónde explicas todo eso. El resto del video y como así la explicación esta muy buena. Me re sirvió para lo que vine a buscar que era entender grid lo más rápido posible. Saludos

[@pablovasquezguevara2588]

Hola quería decir que fue un buen video 👍, pero una pregunta se pueden poner imágenes dentro de esos contenedores ?

[@martinjulioluzuriaga4584]

ah pero esto es un golazo de mitad de cancha!!! muchas gracias maestro por compartilo, un abrazo!

[@manuelalejandrochicaemesal5230]

Eres un máquina, infinitas graciaass

[@TxusGamer027]

Gracias por el video.

[@federicoangeles3021]

y si tengo 7 cajas y la última de abajo que queda sola la quiero expdandir para que tenga el mismo ancho que las 3 columnas? Osea tengo 3 cajas arriba 3 cajas abajo y una sola debajo de esas 2. Yo quiero que la solitaria se expanda. Probé con el grid-column 1/4 pero no me funcionó

[@agustin_di8405]

WTF, hoy estoy justo en esta parte de otro curso y vine a investigar jsjsjsjs, me gustaria aportar algo, y es que hubiera estado bueno que nombres la posibilidad de usar "nth-child()"= de la clase .caja | buscar el "hijo" :nth-child | en la posicion (N°) | propiedades a cambiar {} .caja:nth-child(4) { } para entrar a una caja directamente por su posición y clase, en vez de agregar una clase nueva a cada una, aunque para un tutorial se entiende perfecto, espero les sirva jeje.

[@pedroverde1674]

Muchas gracias Victor, continuare con tu curso de Udemy para seguir aprendiendo.

[@HatNike]

Sos un crack, amigo, qué querés que te diga!!

[@VictorRoblesWEB]

Muchas gracias!

[@jago5101]

Y pensar que esto es lo que buscaba para el responsive

[@romirb8478]

Excelente, muchas gracias! 😀❤

[@EvelynCasillas-fn5ww]

Buenísimo el vídeo

[@rosamariajerez2513]

Eres la caña tío...❤

[@LionelBaquero]

Uso esto a diario y me facilita mucho el trabajo. Buen video, gracias Victor 😉

[@omarrosas5524]

Hola, Grid es similar a Boostra..?

[@gabrielmaciel55]

muy buen curso, me podrías decir como se llama el theme de VScode por favor? gracias!

[@VictorRoblesWEB]

solarized dark

[@markuswater]

Fua me viene de perlas, tenía tiempo sin usar CSS Grid 😄

[@doTheBarba]

Hola Victor, muy bueno el video. Pero no me queda claro como se aplicaria para responsive, como seria 1 col mobile y 3 cols tablet, por ej.

[@maytearenal7206]

¡¡¡ GRACIAS !!!

[@FerchumanX86]

espectacular video

[@jesusre8495]

excelente video

[@megangame6815]

gracias bro no sabia esto, me simplificas mucho el codigo y al hacerlo responsive son muchos menos modificaciones en el css sin duda este grid layout es la maravilla no lo habia usado antes pero en manera general dejare de usar el flex :v de esta manera si me hace la vida mas facil y super bien explicado

[@AGreatChaos999]

Nah increible!!

[@federicomaeda5630]

Muy buenooooooooooooooo, gracias!!!!

[@germanbalduini8359]

Puedo hacer esto para realizar la seccion de una pagina en donde esten las comidas ??

[@juansanchez2868]

genio!! buen video

[@samimario2343]

que navegador ocupas?

[@dragayt543]

Si quiero trabajar con la segunda fila de unas 4 puedo hacer. Grid-template-rows: ' ' 25px (¿O no se puede?).

[@omarrosas5524]

Hola, Grid es similar a Boostra..?

[@leandrovogt5469]

Excelente contenido 👌

[@juguetestoys1137]

hola capo !! como hago en el ultimo caso utilizando: grid-template-areas:...; grid-template-rows: ...; para que la barra lateral ocupe el 10% de la pantalla y la de contenido el 90% ?

[@AGreatChaos999]

eso quiero saber, sabes como es?

[@juancaca1993]

Creo que en ese caso tocaría añadirle el columns y le pones los porcentjaes

[@teomorales14]

En resumen Grid es grid area jajajaja , gracias por tanto Vic ❤

[@christophercalix8587]

Recomendado ---- ★★★★★ -----

[@unusuariode4chan605]

Pua, prefería flexbox pero esto es genial!

[@riquelmista6153]

flexbox es mas para los elementos de adentro. Grid como dijo el chico es para organizar el layout macro

[@waldo21m]

Literal si aprendí en 15 minutos xD

[@Unpopular_Facts]

Buena !

[@josehurtado6871]

Me parece increíble que en sólo 20 minutos explique cosas que otros necesitan 2 horas.

[@VictorRoblesWEB]

pues imagínate lo que podrías aprender en varias horas conmigo en este curso: victorroblesweb.es/master-css-avanzado

[@ivan5278]

Vos crees chat gpt va a reemplazar a los programadores ?

[@miguelfonseca6283]

Por favor, toma todo mi dinero

[@ezequielignaciosalgueiro7285]

grid-area: 1/1 / 3/4;

[@haizeaflores1268]

Drop more vids for beginners

[@juan7114]

Grid es útil, pero como lo odio jajaja

[@nayelyaguilar253]

No le entendi al ultimo

[@sergiozafrasz]

Matador de matadores