CSS Subgrid - El truco de CSS GRID que seguramente no conocías!
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- En este tutorial aprenderás como funciona subgrid y como podemos crear grids perfectamente alineadas facilmente.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Código del Proyecto:
github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters
![ง้อ (ALRIGHT) - FOURTH Prod. by URBOYTJ [ OFFICIAL MV ]](http://i.ytimg.com/vi/Qs8ZeV6Dqj8/mqdefault.jpg)
Manita arriba al video si no conocías este truco de CSS Grid! 👍
Precisó tenía la duda de porque me quedaban los botones así, muchas gracias hombre por la tusa y saludos desde Colombia.
entendi el concepto, el problema es que, como los navegadores no soportan subgrid, no tendria sentido aplicar este truco. En esencia, seria mas recomendable utilizar otro metodo, en ningun caso seria recomendable usar esto. Aun asi, se agradece el conocimiento
Me costó el tema pero creo que ya lo entendí :), gracias por la explicación. Me pregunto, ¿tu qué contenido consultas para aprender los temas? ¿podrías hacer un video sobre cómo mantenerse actualizado? gracias profe Carlos. Saludos desde Colombia.
El mejor maestro. Falcón Máster 🙌
Te super agradezco. Estoy haciendo un curso acelerado de programación y como no tenía noción me está costando bastante. Gracias a tus videos, mejoré mucho y comprendí mucho mejor todo. Ahora con lo aprendido a armar mi propia web para entregar. Muchas gracias!!!!
definitivamente amigo me he visto todos y cada uno de tus videos y con todo respeto eres un mutante para codigo.gracias de corazón por tanto trabajo de tu parte.exitos y saludos desde colombia
Un genio total!!! el mundo necesita más gente como vos!!! GRACIAS! no no lo conocía!
Falcon? Que buena explicación, sos un KapoMegaMasters.. lo bueno y le digo lo bueno es qué tu canal es uno de los pocos que se actualiza a lo pronto. Sale algo novedoso y l tenés. Eso es lo qué hace muchas veces la diferencia. Te felicitó 👨💻👏. Qué Dios te bendiga y muchas gracias. Estaré atento a todo lo que es desarrollo web contigo hermano. 🙏🐝🍃Html5,Css3,Javascript, Boostrap... etc👽
Muchas gracias, la verdad es que todo el tiempo salen cosas nuevas y no puedo actualizarme con todo, pero las pequeñas cositas nuevas que voy aprendiendo me gusta enseñarlas también.
La razón por la que han pasado los años y aun los navegadores como Chrome o Edge no implementan subgrid es porque es muy sencillo elaborar lo planteado en este video mezclando Grid con Flexbox. No le recomendaría a nadie al menos en estos momentos (2023) hacer una web con subgrid. Aun asi se agradece la explicación para fines educativos 👍
Soy de São Paulo/Brasil - mismo hablando en castellano pudo compreender bien el vídeo. Munchas gracias por lá didáctica
Me alegra mucho que pudieras entender mi video, espero que te sirva
si lo miras en alemán, te va a "entrar" 7 veces más
Muchas gracias por el vídeo, me ha sido de gran ayuda
Genial lo del subgrid. Gracias máquina!
Excelente enseñanza. POr cierto mas de un año y medio sin publicar nuevos videos para css grid.. De todas formas muchas gracias.. Me acabo de suscribir.. para estar atento a nuevas publicaciones de video..
Hola Carlos para la parte de botones , no funciona display: grid. en los otros navegadores que no sean firefox , funciona es display: contents ; para que los iconos se puedan alinear en la columna perfectamente. O bueno al menos a mi no me funciono display: grid en la parte de botones.
Gracias eres el mejor :)
si te refieren a que salen apilados, yo lo solucioné con: grid-template-columns: repeat(3, 1fr);
gracias por subir estos vídeo, por favor, núnca dejes de subir este contenido :')
Muchas gracias por tu aporte! Parece lioso al principio, pero lo explicas con mucho detalle, ya es practicarlo. Gracias.
Muy buenos los vídeos, ahora sí pude entender Grid. Muchas gracias!
Excelenetes videos, nunca dejes de hacerlo
Me gusta la forma en la que explicas, sería genial si hicieras un video hablando del colapso de márgenes, a mi me confunde mucho especialmente cuando los divs tienen propiedades como float o inline-block
Video de julio 2020, a la fecha chrome sigue sin soportar subgrid. Gracias por el aprendizaje.
Yo apenas voy comenzando con CSS Grid por lo tanto no lo conocia, y de hecho verifique hoy, y firefox sigue siendo el unico navegador que soporta subgrid, gracias!
Esta muy bien esto, lástima que sólo firefox lo soporta, creo la parte de las publicaciones con flexbox se podría hacer sólo que no quedaría tan genial como con subgrid
wao subiste un video hace poco estas activo !!!! grande Falcon
TU ESTAS LOCO LOCO!!!!!!!!! jajajaja BUEN VIDEO.
Muy bien explicado, comparto tu canal ya que es muy fácil de seguir.
Muchas gracias
Excelente video falcón como siempre aportando calidad, falcón sería genial que hicieras un vídeo programando la página principal de Github, así como programas te la de TH-cam. creo que sería una grandiosa práctica espero que veas el comentario 😁 saludos!!!!
Hola Adrian, lo voy a tener en cuenta pero primero voy a ver como esta hecha.
@@FalconMasters ok muchísimas Gracias Carlos por leer el comentario 😁 y gracias por tenerlo en cuenta, sería super genial hacer una práctica así
05/08/2022 estoy viendo que aun sigue sin soporte en navegadores, creo que flexbox se creo para hacer esto mismo, con display flex al contenedor, y flex-direction column, justyfy-content space-between, y darle al parrafo un height del 100%, funcionaria igual :)
guau comence a practicar grid hace poco y estaba seguro que existia algo como esto pero no tenia idea de como buscarlo
FalconMaster timeee!!! hora de aprender.
Saludos!!!
Hola Falcon, en primer lugar quiero felicitarte por tu contenido tan valioso y el tiempo que dedicas para que este conocimiento sea mas libre, ahora me surge una duda... Que es mas recomendado subgrid o flexbox?
Normalmente para componentes yo trabajo con flexbox, pero eso no quita que se use grid, buen video¡!
No te voy a mentir yo también uso mucho flexbox, en ocasiones debería usar grid pero me acostumbre bastante a flexbox.
Ótimo vídeo sensacional parabéns 👏 tu tava meio sumido em.
Excelente video, muchas gracias
me gustó mucho el curso, aprendí muchas cosas. Igualmente siento q es difícil aprender con videos xq siempre hay cosas q no quedan como uno quiere. ¿Cómo aprendiste a hacer páginas? ¿fuiste a alguna escuela o instituto?
Buen contenido. LIKE
Pensaría que la combinación de ccs grid y flexbox resuelve ese problema y sería lo más fácil y práctico
Hola FM quería preguntarte si eso mismo no se puede realizar con Flex-box?
Gracias por los videos ❤.
Excelente!
Firefox el mejor navegador de la historia, totalmente de acuerdo, lo uso desde 2006, nunca he usado otro.
Gracias Falcon por tus videos. Siempre son muy interesante y muy bien explicados. Queria saber si hago una subgrid para que el.contenido de varios productos queden bien ordenado pero si un producto tiene mas texto o un leer mas se me expanden las demas tambien. Eso se puede manejar??
Muy bueno amigo. Saludos!
pregunta, qué extensión para la selección de la paleta de colores utilizas en sublime text, para ver el color cuando escribes el #numero, gracias
Gracias
¡MASTER CLASS!!!
Puede ser que en el minuto 8:31 lo que explica debería ir en la clase .publicacion?
Gracias Falcón
Perro jefe brooo
¿Las propiedades grid-template-rows: subgrid; y grid-row:span 3; del elemento .publicacion está abarcando tres rows por la propiedad grid-template-rows: repeat(1, auto 1fr auto); que se le aplico a .publicaciones? ¿O no tiene relación alguna?
No conocía esta manera de crear las rows ( repeat(1, auto 1fr auto) ). ¿Es como si le indicáramos que los elementos de la grid van a tener 3 filas de esos tamaños? Agradecería si alguien me explica esta parte.
Muy bueno 😌
Hola Falcon Masters, gracias x tu vídeo. Tengo una pregunta, hiciste algún vídeo para la alternativa de subgrids pero que se vea igual como si estuviera usando subgrid? ya q la alternativa q presentas, no se ve tan bien como con subgrid. Y al parecer subgrid no va a ser implementado en los navegadores, mira q han pasado 2 años de tu vídeo y subgrid sigue en la misma situación según caniuse.
El mejor
Sería ideal ver como hacer lo mismo para los otros navegadores que quede igual q con subgrid.
Alguien sabe el nombre de la fuente que usa en Visual Studio?
No entiendo porque si el contenido de cada publicación ocupa 3x3 y hay 2x2 publicaciones, no se usa repeat(6, 1fr) para columnas y para filas.
Y en su lugar tenemos un repeat(3 ,1fr), un auto 1fr auto, y un repeat(6, 1fr).
Buenas, se me ocurre... una div con su p, con dimensiones definidas y que el texto se oculte si supera dichas dimensiones, creo que sería más fácil. ¿Que opinan?
es lo que estaba pensando, pero como soy nuevo en el tema no se que tal quedara. talves por estética no se hace asi.
Falcon una duda, esto mismo que acabamos de ver se podria tambien hacer utilizando grid areas? en caso de no querer usar subgrid?
grid-template-rows: repeat(1, auto fr auto); no seria como escribir grid-template-rows:auto fr auto; ?
Maestro, tengo una duda, yo tengo mi dominio y mi hosting en godady para mi pagina web la cual se trata del lavado de muebles, colchones y alfombras pero quiero crear landing pages a parte, 1 simple que hable solo del lavado de colchones, luego otra del lavado de alfombras y otra de lavado de muebles, ¿esas landing pages las puedo crear como subdominios de mi principal dominio?, agradeceria de corazon tu respuesta
Podrías bajar el precio de tu curso de desarrollo web please, lo quiero comprar
Está genial la información pero el hecho que no sea soportado por otros navegadores que son más usados, desmotiva un poco.
Firefox es el mejor!! Se tenia que decir... y se dijo!
Efecto de subgrid, te cambia la voz al usarlo:
0:59 vs 5:14
Muy bueno falcómMaster solo una duda que pasa si ahí en vez si todas las card ejemplo ahí le pusistes todos tienen 3 en cada card pero si cada card tiene más de un lado qué otro? Ejem ahí pusistes titulo, texto y parte de reacción o acción y que pasa si yo dejo que otras publicaciones o más bien cards tenga más que solo esos 3?
Entonces en .publicaciones en vez de poner solo 3 filas pondrías mas.
@@FalconMasters no espera eso estaría bien si solo fuera siguiendo algo como tu ejemplo creo que kk entiendo bien o no me supe explicar bien tomemos las cards son 4 verdad? Bien y cada card tiene 3 elementos justo como tu ejemplo ahí todo bien perp el problema que yo te doy es que pasa si ejem el card 2 y 3 tienen más elementos qué el card 1 y 4 y tu me dices un índice con creo cuando por ejemplo el usuario es el que decide cuantos elementos tener obvio con un límite no seria mejor usar ahí javascript? Con esto de css grip y subgrip 🤔?
tu has inventado subgrid o solo haces el tutorial? nunca había escuchado de este
Vengo del 2022 y todavia no hay soporte para css subgrid. :(
Pregunta, para distintos dispositivos cambia la cantidad de columnas? Si no, cómo se podría hacer esto?
Si en dispositivos móviles puedes cambiar el numero de columnas, al final del video enseño como lo hago en mi caso.
Y también en mi curso de css grid doy varios ejemplos muy útiles.
Buenos dias falcon master tengo una pregunta, cual es el orden completo para ver tus videos? ( yo se que empieza por html, css y javascript y despues? )
Php y mysql luego puedes mirar los extras q tenga de css o JavaScript o algunas otras cosas pero por ahí puedes seguir
Lol, yo tenia pensado que solo se podia construir una rejilla "principal" la cual definia todo el documento y ya despues de ahi se partia con flexbox para los elementos internos. De hecho creo haber intentado usar la.propiedad de display: grid en un div dentro de la misma rejilla principal y como que hice algo mal porque no obtuve el resultado que queria
Si se puede poner un grid dentro de otro, pero no compartirían las filas y columnas, cosa que con subgrid si podemos.
good!!!!
Carlos, pero eliminé esta propiedad «grid-template-rows: repeat(1, auto 1fr auto);» y aun me sigue funcionando bien, no entiendo por que la estableciste así. ¿Qué papel juega?
Cuando no defines row, simplemente se activara el row-automatico, es como poner auto auto auto auto, dependiendo de las filas que vayas a usar, me olvidaba en row implicito se puede modificar, busca un poco de información
Si, como te comenta Juan lo que pasa es que si no lo definimos las filas serian implícitas, se crearían de forma automática.
Falcon hoy día ya se puede usar eso en Chrome en la última versión
Genial!
@@FalconMasters tienes algún tutorial que hable de mobile first con grid?
Soy nuevo por este canal, tengo una pregunta: ¿Esto funciona como si fuera boostrap?
Mijo bootstrap ya tiene su grid layout predefinido...solo tienes que seguir las reglas de diseño que ellos tienen...por eso es que es un framework, por que ya tiene casi todo listo para maquetar
Papu falcom, tengo un problema, en un siderbar quiero poner dos div, pero en si, quiero manejar qur un div este para arriba o que este de lado, como lo haria :).
Con CSS Grid o Flexbox lo puedes hacer, Tengo cursos de ambos en mi canal de youtube.
definitivamente es más facil alinear el contenido interno con flexbox xd.
esperando por años esta propiedad y chrome no la tiene en mira, voy a colocarla aun sin uso para que los robots de google la rastreen y se animen todos los navegadores a soportarla
profesor como puedo agregar un elemento como en facebook que para subir una foto ya tiene un formato
que tengo que estudiar para hacerlo ? porque ya estudie html y css y java script recien estoy comenzando
pero el php para que es ?
AYUDA ESTOY CONFUDIDO !!!
No se entiende tu pregunta
Reformula
el php es para cuando trabajes con un servidor (por ejemplo si quieres hacer un logeo y registro o guardar cosas en una base de datos), y con lo de las imgs investiga que es css flexbox y css grid.
También sirve Place-content: center;
En donde?
Falcon cuando sacas nuevos cursos
Este año si o si tengo que sacar un curso muy bueno.
@@FalconMasters ojalá jajajaja deberías de sacar de frameworks de javascript o de frameworks de Javascript y PHP, sería estupendo lo compraría de unas!
Donde yo puedo investigar nuevas cosas acerca CSS HTML o JAVASCRIT.
Saludos 👋
Leyendo blogs y la documentación.
@@FalconMasters Mucha gracias
esta chevereeee, pero me cuesta entender todooooo. Ni modo!! tengo que practicar practicar practicar!!!!!!!!!!!!
aun los navegadores no lo soporta 😥
ya han pasado 3 años de este truco asombroso y aun no funciona con el navegador chrome T.T 😵
Todavía tiene 18.37% 😥
Yo: apenas puedo alinear cosas con css y no se flexbox ni grid.
FM: Subgrid.
Yo: keh.
no te preocupes no lo usaras nunca, porque no es compatible con chrome, y el 80% usan chrome no tiene mucho sentido usarlo.
pues aprende a usar flex y grid xD ???? xdddd
@@carlos126q Probablemente algún día sí sea compatible, con lo cual no está de más conocer de qué trata.
@@juliangomez716 Claro, que sera compatible, en 3 o 4 años mas, hay propiedades que aun no se implementan y llevan 3 años en espera, esto es relativamente nuevo, y si, no esta mal conocer estas propiedades, pero me incomoda que no mencionen la compatibilidad de estas propiedades, te ahorras tiempo aprendiendo algo que nisiquiera es compatible con el mercado de los navegadores.
@@carlos126q al principio, falcon dijo: "Solo está disponible en Firefox"
4:49 sera que te pagaron para esa publicidad??? Jajajaja no vale, broma, es cierto
Opera es el mejor navegador
Noruega🇳🇴
Firefox será el mejor navegador, pero ya me he encontrado varias webs que no han funcionado correctamente y me notifican que solo funcionan con Chrome.
Pues que mal hechas han de estar esas páginas web. ¿Seguro que no eran páginas web de gobierno? Esas siempre suelen estar mal hechas.
Primero comentario y con like adelantado
Creo que no podría estar mejor explicado
carlos arturo porque no haces una comunidad de discord así seria mejor los que tienen sugerencias pueden decirlas en discord y si tienen dudas igual y podremos hablar con tigo discord.com/
Hola Jansel, es una idea buena y si lo he pensado muchas veces, pero no tengo tiempo para cuidarla. Quizás mas adelante.
@@FalconMasters entonces crea un bot para discord con node.js o con cualquier otro lenguaje
Es decir que lo que vas a explicar en este video es siempre y cuando usas Firefox de lo contrario en otros navegadores no va a funcionar ☹
no man... ahi mismo te dice que linea de codigo poner por si otro navegador que utilicen no detecta subgrid
@@hugostiglitz1254 gracias bro
Me lo tire en un dia y ni cuenta me di
Genial!
Practicamente es inutil el Subgrid, ni el 3% porciento lo usa y solo en firefox esta disponible... y quien usa firefox?? nadie.
Solo los mas listos usamos firefox 😎
dislike por decir que firefox es el mejor navegador de la historia... :v
mas bien te doy uno a ti
@@dickrowilsonbecerraherrera si te gusta navegar con un navegador que te quema los recursos... para gustos los colores xD