Ótimas explicações Matheus Battisti tanto para Grid, quanto para Flexbox. Normalmente pulamos os conceitos básicos, aderindo à praticidade e produtividade oferecida pelos frameworks, porém na hora de personalizar nossos conteúdos, ficamos perdidos kkkkkkk.
Cara, que aula top das galáxias. Comprei um curso de uma escola bem conhecida(OBC), e fiquei 2 semanas encima de grid e flex box, e mesmo assim não ficou claro, didática não chega nem perto da tua. Mas agora em 10 minutos na tua aula eu entendi perfeitamente com teus exemplos simples e claros. Tu é um baita professor, tua didática é excelente. Obrigado, já curti e me inscrevi, e ainda vou divulgar pra todos que conheço que estão começando na área.
Top top top, que baita ajuda, estou em JavaScript e vou me aprofundar nos conceitos antes de passar para os frameworks, quero ter uma base bem sólida, mas meu Css é muito fraco ainda, mas esse video me deu uma luz que consiguo melhorar, muito top, obrigado.
Estou terminando o curso de HTML 5 e css3, e último módulo do curso do Guanabara, ia para flex box e css grid layout ! Mas ainda não foi lançado já faz muito tempo 😢 Então esse vídeo caiu como um complemento dessas competências que faltavam! Aula muito boa parabéns!👏👏
Matheus, estava tendo uma dor de cabeça tremenda com o desenvolvimento de uma pagina e seu video me ajudou muito cara! melhor aula que vi sobre o assunto. ja comecei a te acompanhar para mais aulas. Obrigado por compartilhar! conteudo de grande ajuda.
Bem legal display grid só que como ele mesmo falou com framework que nem o bootstrap fica bem mais prático. Mas é sempre bom conhecer os recursos do CSS puro, dependendo do projeto se você não puder fazer uso de frameworks torna-se bem útil esse conhecimento.
Adorei sua aula sobre Display Flex, quando vi essa aula nem pensei antes de clicar, e como sempre sua didatica esta excelente, muito obrigado e parabéns pelo conteúdo!
Excelente Curso!! Em pouco tempo já consegui tirar muitas dúvidas. Sugestão de aula: animações com CSS. Estou pesquisando muito sobre isso e não acho um conteúdo bom.
Já tinha visto uns outros 3 videos do mesmo tema e não tinha conseguido entender, parabéns didatica muito boa!! SUGESTÃO DE CURSO OU VIDEO=Django! e mais uma vez Parabéns!!!👏👏👏👏👏👏👏👏
Ótima aula! Expandiu meu conhecimento sobre Grid e outras maneiras de usá-lo. Tem algum vídeo específico que mostra um exemplo de projeto de site, como se fosse de verdade, explorando a montagem de layouts?
EAI Matheus...entre 25:15 e 25:40, vc esqueceu de citar o termo 'span' (fonte: MDN) usado junto com 'grid-column-start/end' para expandir o elemento....Valeu!!!
@MatheusBattisti, muito boa a explicação. E para o conteúdo das divs nao ultrapassarem os limites de cada grid? Por exemplo, fazendo um scroll dentro da div, faço como?
@@MatheusFerreira-iv4ku Quando tenta usar, ela está com um risco no meio da palavra. Tu pode usar, entretanto não é recomendando, pois pode não funcionar bem muito em breve.
bem mais fácil do que ter que ficar criando várias divs dentro de divs e ditando regras de flex e row e colum pra cada uma e todo esse trabalho só pra criar a estrutura do layout rs, muito melhor assim
Matheus, se eu fosse usar um @media Query depois de ter estruturado o CSS grid, como eu faço pra estilizar uma coluna e uma linha especifica? eu utilizei a fração 3fr columns 3fr rows, se eu quisesse estilizar a a segunda coluna por exemplo como faço?
Matheus, na parte de alinhamento o posicionamento correto não seria o align-content?(posicionamento vertical) tendo em vista que o align-items é utilizado para alterar o conteúdo e não o container?
Acabei de assistir os dois vídeos (o de Flexbox e este de Grid), mas só para ficar claro um não substitui o outro, são ferramentas diferentes para necessidades diferentes, correto? Em quais situações é recomendado o uso de Flexbox e não Grid ou vice versa?
Ao longo de todo esse tempo que estudo desenvolvimento Web eu sempre leio essa duvida. "Quando usar um determinado recurso e quando não usar?" Não tenho experiência de mercado ainda, mas a minha opinião sobre o assunto é CRIE PROJETOS Criar projetos é a melhor maneira de começar a usar TUDO que vc vem aprendendo, no caso do FlexBox e CSS Grid desenvolva projetos focados no layout, nem precisa usar programação, somente priorize o layout Será na construção do projeto que vc perceberá quando usar um ou outro, são nesses momentos que necessidades diferentes começam a vim, e com o tempo e dedicação a sua interpretação de quando usar um ou outro começa a aumentar Espero ter ajudado 😁
Hoje dia 18 de novembro o meu .container div { } só aceita o border acima do padding, se eu deixo border abaixo do padding ele não funciona e se meu background fica abaixo do padding também não funciona alguém sabe explicar o porque ?
Obrigado, Matheus, mas, uma dúvida por favor: antes de ver esse recurso, sempre usei tabelas do HTML para ter praticamente os mesmos efeitos. Imagino, porém, que você irá condenar o uso de tabelas no HTML e queria que comparasse os dois usos. Obrigado!
É mais fácil, e mais gostoso de se usar. Mas o css grid vai te permitir fazer de forma bem mais fácil coisas mais complexas, não é a toa que css grid é o mais importante quando levamos em conta css em empresas
⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/
Esses grid-row-gap e grid-column-gap hoje em dia são obsolutos, utilizamos hoje row-gap e column-gap! Espero ter ajudado!
Ótimas explicações Matheus Battisti tanto para Grid, quanto para Flexbox. Normalmente pulamos os conceitos básicos, aderindo à praticidade e produtividade oferecida pelos frameworks, porém na hora de personalizar nossos conteúdos, ficamos perdidos kkkkkkk.
me salvou muito tempo apanhando para os float e inline-block
Cara, que aula top das galáxias.
Comprei um curso de uma escola bem conhecida(OBC), e fiquei 2 semanas encima de grid e flex box, e mesmo assim não ficou claro, didática não chega nem perto da tua. Mas agora em 10 minutos na tua aula eu entendi perfeitamente com teus exemplos simples e claros. Tu é um baita professor, tua didática é excelente. Obrigado, já curti e me inscrevi, e ainda vou divulgar pra todos que conheço que estão começando na área.
Lindissimo, nem sei o que comentar mas preciso dar ibope para esse ser iluminado, perfeito, amei. Pessoas que dão vontade de abraçar, que didática
Top top top, que baita ajuda, estou em JavaScript e vou me aprofundar nos conceitos antes de passar para os frameworks, quero ter uma base bem sólida, mas meu Css é muito fraco ainda, mas esse video me deu uma luz que consiguo melhorar, muito top, obrigado.
Meu deus, eu tenho aprendido muito com você, tanto no youtube quanto na udemy, espero conseguir minha vaga logo :D
Grande! Atendendo aos pedidos. Valeu, Matheus!
de nada Walter! =D
Estou terminando o curso de HTML 5 e css3, e último módulo do curso do Guanabara, ia para flex box e css grid layout ! Mas ainda não foi lançado já faz muito tempo 😢 Então esse vídeo caiu como um complemento dessas competências que faltavam! Aula muito boa parabéns!👏👏
CFBCursos tem um curso completo de html e css , pesquisa aqui no RUclips .
Matheus, estava tendo uma dor de cabeça tremenda com o desenvolvimento de uma pagina e seu video me ajudou muito cara! melhor aula que vi sobre o assunto. ja comecei a te acompanhar para mais aulas. Obrigado por compartilhar! conteudo de grande ajuda.
Valeu, chegou na hora certa. Estou vendo seu curso de Tailwind justamente na parte de grid.
showw Sidnei! =)
Bem legal display grid só que como ele mesmo falou com framework que nem o bootstrap fica bem mais prático. Mas é sempre bom conhecer os recursos do CSS puro, dependendo do projeto se você não puder fazer uso de frameworks torna-se bem útil esse conhecimento.
Gostei muito, parabéns professor pela explicação
valeu!
Você explica super bem Matheus!!!
obrigado Francielle! =)
tinha me esquecido de como usar o grid, e em 10 minutos do seu video +/- eu consegui me lembrar totalmente e fazer meu projeto rsrsrsrs, obrigado!
Aprendi nessa aula oque um curso todo demorei pra aprender, vc é o cara!
Adorei sua aula sobre Display Flex, quando vi essa aula nem pensei antes de clicar, e como sempre sua didatica esta excelente, muito obrigado e parabéns pelo conteúdo!
Aula muito boa e clara, não entendi a explicação no meu curso e corri pra cá kkk. Obrigado
salvou demais na parte de alinhamento individual dos itens
valeu Marcos!
Excelente Curso!! Em pouco tempo já consegui tirar muitas dúvidas.
Sugestão de aula: animações com CSS. Estou pesquisando muito sobre isso e não acho um conteúdo bom.
opa Leonardo, boa! grande sugestão =)
Parabéns Matheus Battisti - Hora de Codar, Excelente conteúdo!
Muito bom! Como sempre a didática do Matheus me surpreendendo! vlw mesmo! :)
valeuu Ian!
Já tinha visto uns outros 3 videos do mesmo tema e não tinha conseguido entender, parabéns didatica muito boa!! SUGESTÃO DE CURSO OU VIDEO=Django! e mais uma vez Parabéns!!!👏👏👏👏👏👏👏👏
valeuu =))
muito bom , aprendi muito sobre grid css
boa! =D
Aula fantástica!
valeu! =)
Ótima aula!
Expandiu meu conhecimento sobre Grid e outras maneiras de usá-lo.
Tem algum vídeo específico que mostra um exemplo de projeto de site, como se fosse de verdade, explorando a montagem de layouts?
grid é muito legal, mais uma grande aula👏
valeu Andre!
Cara muito obrigado!! Tens o dom, parabéns colega!!
o bruxo do desenvolvimento web 😂😂😂👏👏👏👏 tô fazendo vários cursos seus na outra plataforma. obrigado por compartilhar seu conhecimento conosco.
opa Marcos, que massa que tu tá fazendo outros cursos =) Abração!
EAI Matheus...entre 25:15 e 25:40, vc esqueceu de citar o termo 'span' (fonte: MDN) usado junto com 'grid-column-start/end' para expandir o elemento....Valeu!!!
obg
Matheus sempre tive duvida no grid,
mas a aula de hoje me ajudou bastante !!!
📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecodar.com.br/ebook-melhores-praticas-html-e-css-gratuito/
Aula top, ajudou muito. Parabens ae
Tenho muita duvida de quando usar grid e quando usar flex. Eu fiz seu curso de Tailwind, bom demais :D.
tomara que eu consiga tirar tuas dúvidas Jhonatas! =)
Aula top. super claro e fácil de entender.
Excelente, obrigado!
valeu Davi!
🔥 Top como sempre! 👏👏👏
valeuu Eric =D
Parabéns Matheus por esse e outros conteúdos do canal tenho adquirido muito conhecimento, principalmente pelo udemy...
Sucesso e abraço !
sempre foda meu mano! salve
Grid é divertido 😂😂😂
Brabissimo!
valeuu Augusto! =)
ótima aula
Bom demais!!
Valeu Wallace! Se quiser aprender mais sobre desenvolvimento web, dá uma olhada: horadecodar.com.br/comunidade-hora-de-codar/
@MatheusBattisti, muito boa a explicação. E para o conteúdo das divs nao ultrapassarem os limites de cada grid? Por exemplo, fazendo um scroll dentro da div, faço como?
Show professor!!! 👏👏👏
obrigado! =)
Excelente conteúdo! 👏👏👏👏👏👏👏👏👏
Valeu Luis!
Excelente explicação
Sensacional! Lembrando que o grid-row-gap está obsoleto atualmente, infelizmente.
Pq?
@@MatheusFerreira-iv4ku Quando tenta usar, ela está com um risco no meio da palavra. Tu pode usar, entretanto não é recomendando, pois pode não funcionar bem muito em breve.
Muito bom precisa praticar p assimilar...haaa
uhum Zeriel, a ideia era dar o caminho das pedras =D Quem sabe mais pra frente rola um projetinho com o grid e flexbox
E responsivo seria ótimo
bem mais fácil do que ter que ficar criando várias divs dentro de divs e ditando regras de flex e row e colum pra cada uma e todo esse trabalho só pra criar a estrutura do layout rs, muito melhor assim
boa aula. voce tem video , manipulando imagens e textos nessa grid de forma individual também? valeu.
Matheus, se eu fosse usar um @media Query depois de ter estruturado o CSS grid, como eu faço pra estilizar uma coluna e uma linha especifica? eu utilizei a fração 3fr columns 3fr rows, se eu quisesse estilizar a a segunda coluna por exemplo como faço?
Hoje em dia utilizamos row-gap, column-gap
Muito bom!
Muto obrigado
boa noite tem o cod no repositorio do github?
Excelente
Matheus, na parte de alinhamento o posicionamento correto não seria o align-content?(posicionamento vertical) tendo em vista que o align-items é utilizado para alterar o conteúdo e não o container?
Matheus, como você seleciona todo o texto no vs code e comenta ele? qual o atalho para isso?
No Windows vc seleciona o que vc quer comentar e aperta " Ctrl + ; "
Acabei de assistir os dois vídeos (o de Flexbox e este de Grid), mas só para ficar claro um não substitui o outro, são ferramentas diferentes para necessidades diferentes, correto?
Em quais situações é recomendado o uso de Flexbox e não Grid ou vice versa?
Ao longo de todo esse tempo que estudo desenvolvimento Web eu sempre leio essa duvida. "Quando usar um determinado recurso e quando não usar?"
Não tenho experiência de mercado ainda, mas a minha opinião sobre o assunto é CRIE PROJETOS
Criar projetos é a melhor maneira de começar a usar TUDO que vc vem aprendendo, no caso do FlexBox e CSS Grid desenvolva projetos focados no layout, nem precisa usar programação, somente priorize o layout
Será na construção do projeto que vc perceberá quando usar um ou outro, são nesses momentos que necessidades diferentes começam a vim, e com o tempo e dedicação a sua interpretação de quando usar um ou outro começa a aumentar
Espero ter ajudado 😁
tem os codigos da aula salvos em algum local?
Hoje dia 18 de novembro o meu .container div { } só aceita o border acima do padding, se eu deixo border abaixo do padding ele não funciona e se meu background fica abaixo do padding também não funciona alguém sabe explicar o porque ?
Alguém sabe como o Matheus copia, cola e edita tão rápido a partir do 3:58?
Muito Matheus
Obrigado, Matheus, mas, uma dúvida por favor: antes de ver esse recurso, sempre usei tabelas do HTML para ter praticamente os mesmos efeitos. Imagino, porém, que você irá condenar o uso de tabelas no HTML e queria que comparasse os dois usos. Obrigado!
meu grid não esta expandindo para toda área html, como eu posso arrumar isso?
legal top valeu!
Como coloco elementos html dentro dessas áreas ?
Show!!!
obrigado Beth!
ja tinha estudado o grid, só que nao aprendi nada kkk mais agrmeu amigo, vou ser um pai do lego
boa! hahaha
vou treinar pacas isso pq pensa numa dificuldade é ajeitar tudo no seu lugar na pagina.
Top.
Rapaz se é o pelé
hahha valeu João!
Da pra fazer umas artes pixeladas kkkk
Só eu que gosto mais de flexbox?
É mais fácil, e mais gostoso de se usar. Mas o css grid vai te permitir fazer de forma bem mais fácil coisas mais complexas, não é a toa que css grid é o mais importante quando levamos em conta css em empresas