O mind map é o grande diferencial para explicar as funcionalidades. Parabéns por perceber e estruturar sua aula baseada nele. Até agora, um dos melhores vídeos explicativos sobre CSS grid que assisti no TH-cam mesmo ao comparar com vídeos gringos. Excelente.
Muito bom cara. Não desanime com poucas visualizações do TH-cam... é uma jornada longa, conheço alguns que levaram anos para serem "notados". Mas não fica parado, tenta se aproximar de uma empresa ou outro youtuber que vá te dar visibilidade, sozinho pode demandar um tempo expressivo. Em relação ao conteúdo, agregou bastante!
parece ser complicado pois tem muita coisa que parece que faz a mesma coisa hahaha, mas é isso bora praticar ! obrigado pelo conteúdo gratuito e de ótima qualidade 😄
Cara, você deu uma explicação sensacional! Começando a curtir bastante a Grid no CSS, poderia fazer um vídeo falando sobre responsividade? é uma coisa que sinto muita dificuldade em meus projetos. Deus abençoe e sucesso no canal!
Valeu irmão! Eu fiz um vídeo sobre a grid do Bootstrap onde falo um pouco sobre responsividade, mas vou ver se faço um vídeo específico para isso, explicando os media query e tudo mais. :)
Eu aprendi muito com sua explicação desde os outros vídeos relacionados ao grid e ao flex, mas eu fiquei com uma pequena dúvida em questão alí no grid-templete-rows dos 11:51 em diante, no momento em que você diz "quando ele quebrar vai virar 200px na segunda linha", neste caso não seria os 400px (de row)?
Nos 15:17 também inverteu a ordem do mapa mental, de início era o grid-auto-columns, grid-auto-rows e grid-auto-flow, na sequência passa a ser grid-auto-flow, grid-auto-columns e grid-auto-rows... mas a explicação está excelente.
Fale mestre bom dia ! Excelente video, parabéns! Tah ai um assunto que bato cabeça, front-end heheheheh Tenho uma dúvida, as 22:08 min do vídeo, o conteúdo vaza pra baixo do container, não deveria ficar preso dentro? como se fosse uma parede?
Opa, bom dia mano! Obrigado pelo comentário. 😃 Então, isso aconteceu na verdade por eu ter limitado a largura daquelas colunas para 100px, e como a altura da linha estava sendo definida automaticamente com base no conteúdo, acabou "colapsando" o container. Se eu tivesse especificado um tamanho para cada linha com o grid-template-rows, ou alguma outra regra, daria para limitar à altura do container. Um abraço!
Obrigado, muito boa sua explicação, esclareceu muito minha dúvidas. Uma perguntinha, vi que no CSS você clica e a linha ficava comentada, qual o atalho você utiliza, pois procurei e até encontrei o do windows mas não funcionou?
Opa, o ideal é aprender os dois. No dia a dia eu uso mais o Flexbox porque ele é mais versátil para algumas aplicações. O css grid eu uso mais quando vou criar layouts em formato de grade mesmo. :) Se a gente fosse criar o layout do TH-cam por exemplo, eu usaria flexbox no cabeçalho e na sidebar para distribuir o conteúdo, e usaria display grid para criar o layout de cards dos vídeos (e também flexbox dentro de cada card) Os dois compartilham diversas propriedades, então se você aprender o css grid, você vai conseguir entender mais fácil o flexbox.
e como funciona os parâmetros 'grid-column/row' com valores em frações? Eles são correspondente a fração total de colunas/linhas no grid? Exemplo: grid de 4 colunas e 4 linhas. Se eu colocar como grid-column: 1/3; Ele (grid-item) terá a caracteristica de 1 terço de 4? 1,333 partes? E como isso altera realmente o item? Assumirá o formato de 2 partes de 4? Ou irá permanecer como 1 parte de 4?
Bom dia tudo bem, pelo que entendi o Grid já é responsivo, se a pessoa abrir o site no celular, no tablet, no notebook, no computador ou em uma televisão o site vai ajustar automaticamente ??? Ou vai precisar mais alguma coisa nos comandos ??
Valeu Wagner, realmente eu acabei esquecendo de dar o zoom na hora de gravar, ai quando percebi já era tarde demais kkk, mas nos próximos vou ficar mais atento
✅ VEJA TAMBÉM
▸ CSS Flexbox - Aula Completa: th-cam.com/video/WBMN-PcwqG8/w-d-xo.html
▸ 5 cursos grátis de programação: th-cam.com/video/XF82aXhdLXc/w-d-xo.html
▸ Aprender Front-end em 3 meses, é possível?: th-cam.com/video/FxB9UUolXs8/w-d-xo.html
O mind map é o grande diferencial para explicar as funcionalidades. Parabéns por perceber e estruturar sua aula baseada nele. Até agora, um dos melhores vídeos explicativos sobre CSS grid que assisti no TH-cam mesmo ao comparar com vídeos gringos. Excelente.
Como esse canal só tem 8K??
Muito bom o vídeo.
Faz um vídeo explicando as unidades de medida do css.
Tem muitas e não dá pra entender a função de cada.
Está de parabéns o meu vídeo didático 🎉🎉
Assistindo em #2023, muito bom o seu conteúdo
Esse é o melhor video sobre grid que eu assisti. Muito obrigado, seguindo o canal já!
Muito bom cara.
Não desanime com poucas visualizações do TH-cam... é uma jornada longa, conheço alguns que levaram anos para serem "notados".
Mas não fica parado, tenta se aproximar de uma empresa ou outro youtuber que vá te dar visibilidade, sozinho pode demandar um tempo expressivo.
Em relação ao conteúdo, agregou bastante!
Opa, obrigado Paulo! Pode deixar kkk, vou continuar postando aqui sempre que tiver tempo disponível. Fico feliz que tenha te ajudado.
Essa didática de usar o mind map para explicar funciona MUITO pra mim, obrigado cara! Vou ver e rever esse vídeo umas 200x kkkkkk.
kkk valeu Bruno! Fico feliz que tenha gostado :)
Te achei agora e já gostei, muito obrigada pela super aula.
parece ser complicado pois tem muita coisa que parece que faz a mesma coisa hahaha, mas é isso bora praticar ! obrigado pelo conteúdo gratuito e de ótima qualidade 😄
Parabéns!!
Muito bom o vídeos, parabéns. Aprendi bastante
Cara, agradeço infinitamente a você e as suas aulas que me fizeram entender cssgrid e flex box. Você é show!!
Pow, muito obrigado pelo comentário Pedro. Fico muito feliz que tenha te ajudado de alguma forma, tmj 👊🏻
Valeu!
Você é excelente amigo
Valeu Robert, tmj :)
otimo video. keep up the good work.
Parabéns pelo conteúdo, colega! Vou até printar que me inscrevi nesse canal quando tinha 2mil inscritos kkkk sucesso!
Kkkk show mano! Obrigado pelo feedback e pela confiança 🙂
Show de bola.. Parabéns !
Obrigado Thiago, tmj 👊🏻
Cara, simplesmente sensacional o seu conteúdo! didática incrível ! Parabéns e mtu mas mtu obrigado!
Pow, fico feliz que tenha te ajudado, eu que agradeço! 🙂
Mais uma vez, parabéns pela excelente aula, sua didática é show !!
Valeu irmao.. muito boa tua didatica. Facil de entender. Abraco
Obrigado por seu conteúdo irmão, me ajudou muito!
Muito bom 😃
Valeuu mano! :)
Show, parabéns pelo video ❤
Valeuu Rennan 🙂
Que vídeo sensacional!! Tirou todas minhas dúvidas
Cara, você deu uma explicação sensacional! Começando a curtir bastante a Grid no CSS, poderia fazer um vídeo falando sobre responsividade? é uma coisa que sinto muita dificuldade em meus projetos. Deus abençoe e sucesso no canal!
Valeu irmão!
Eu fiz um vídeo sobre a grid do Bootstrap onde falo um pouco sobre responsividade, mas vou ver se faço um vídeo específico para isso, explicando os media query e tudo mais. :)
Parabéns! Conteúdo de muita qualidade!
Eu aprendi muito com sua explicação desde os outros vídeos relacionados ao grid e ao flex, mas eu fiquei com uma pequena dúvida em questão alí no grid-templete-rows dos 11:51 em diante, no momento em que você diz "quando ele quebrar vai virar 200px na segunda linha", neste caso não seria os 400px (de row)?
Nos 15:17 também inverteu a ordem do mapa mental, de início era o grid-auto-columns, grid-auto-rows e grid-auto-flow, na sequência passa a ser grid-auto-flow, grid-auto-columns e grid-auto-rows... mas a explicação está excelente.
Fale mestre bom dia !
Excelente video, parabéns!
Tah ai um assunto que bato cabeça, front-end heheheheh
Tenho uma dúvida, as 22:08 min do vídeo, o conteúdo vaza pra baixo do container, não deveria ficar preso dentro? como se fosse uma parede?
Opa, bom dia mano! Obrigado pelo comentário. 😃
Então, isso aconteceu na verdade por eu ter limitado a largura daquelas colunas para 100px, e como a altura da linha estava sendo definida automaticamente com base no conteúdo, acabou "colapsando" o container.
Se eu tivesse especificado um tamanho para cada linha com o grid-template-rows, ou alguma outra regra, daria para limitar à altura do container.
Um abraço!
@@LayerComp Obrigado Dr..
Gracias por los aportes, que programa usas para los mapas mentales
Obrigado pelo comentário, John! Eu uso o XMind 🙂
Obrigado, muito boa sua explicação, esclareceu muito minha dúvidas.
Uma perguntinha, vi que no CSS você clica e a linha ficava comentada, qual o atalho você utiliza, pois procurei e até encontrei o do windows mas não funcionou?
Valeu Felipe! :). Para comentar a linha eu utilizo o CTRL + ; no Windows
Muito boa a didática com mind maps!!!! Alias, qual site vc utilizou para faze-los?
Vídeo aula espetacular! Parabéns! Ganhou mais um inscrito.
Rodrigo, posso focar em um só ? usar só o grid ou preciso aprender os dois ? e outra pergunta qual você acaba usando mais ?
Opa, o ideal é aprender os dois. No dia a dia eu uso mais o Flexbox porque ele é mais versátil para algumas aplicações. O css grid eu uso mais quando vou criar layouts em formato de grade mesmo. :)
Se a gente fosse criar o layout do TH-cam por exemplo, eu usaria flexbox no cabeçalho e na sidebar para distribuir o conteúdo, e usaria display grid para criar o layout de cards dos vídeos (e também flexbox dentro de cada card)
Os dois compartilham diversas propriedades, então se você aprender o css grid, você vai conseguir entender mais fácil o flexbox.
e como funciona os parâmetros 'grid-column/row' com valores em frações? Eles são correspondente a fração total de colunas/linhas no grid?
Exemplo: grid de 4 colunas e 4 linhas.
Se eu colocar como grid-column: 1/3;
Ele (grid-item) terá a caracteristica de 1 terço de 4? 1,333 partes? E como isso altera realmente o item? Assumirá o formato de 2 partes de 4? Ou irá permanecer como 1 parte de 4?
Bom dia tudo bem, pelo que entendi o Grid já é responsivo, se a pessoa abrir o site no celular, no tablet, no notebook, no computador ou em uma televisão o site vai ajustar automaticamente ??? Ou vai precisar mais alguma coisa nos comandos ??
Suas aulas são excelentes. Mas na próxima, por favor, aumente o fonte ou mostre o código com Zoom.
Obrigado.
Valeu Wagner, realmente eu acabei esquecendo de dar o zoom na hora de gravar, ai quando percebi já era tarde demais kkk, mas nos próximos vou ficar mais atento
mano esses cards rodam com qual programa?
Opa, o programa se chama XMind
Precisei dar zoom no vídeo pra enxergar
Eu vacilei kkk, acabei esquecendo de aumentar na hora da gravação :)