Aprenda CSS Grid em 30 minutos - Tutorial Grid
Вставка
- Опубліковано 24 сер 2021
- 📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecodar.com.br/ebook-...
★ Nossos Cursos: www.horadecodar.com.br/cursos...
O que é o Grid CSS?
O Grid é uma regra da propriedade display, assim como block e flex, que originam outros resultados
Precisamos aplicar esta regra a um container que contém alguns itens dentro dele
Isso faz com que estes itens sejam condicionados a uma exibição de grid, e podemos aplicar outras regras que só funcionam quando estão neste estado
O grid é dividido por linhas (rows) e colunas (columns), que é o formato que estes elementos são exibidos
Podemos alterar como as colunas são dispostas, vamos utilizar a regra grid-template-columns
Seguindo a mesma ideia, podemos alterar como as rows se comportam, a propriedade é a grid-template-rows
Temos também como alterar o espaçamento entre as áreas (gap), com a regra gap
Areas de template
O Grid também tem uma propriedade para criar uma área de template, ou seja, descrevemos como o layout vai se comportar
Primeiramente utilizamos a regra grid-template-areas para definir as áreas
Precisamos replicar o nome várias vezes para atribuir o número de colunas de cada área
Ou seja: header header header header = 4 colunas
Então podemos manipular o tamanho das próximas, como sidebar e content que são menores
Isso nos permite um layout super flexível e funcional, a parte do footer copiamos o cabeçalho
Outra importante regra também é a grid-area, que precisa ser inserida em cada um dos componentes
Com ela o HTML e o CSS consegue entender qual elemento representa qual parte do site que definimos na regra grid-template-areas
Vamos ver tudo isso e mais um pouco nesse vídeo, bora? 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord - Наука та технологія
⭐ 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.
Aula top. super claro e fácil de entender.
obg
Matheus sempre tive duvida no grid,
mas a aula de hoje me ajudou bastante !!!
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.
Cara muito obrigado!! Tens o dom, parabéns colega!!
Parabéns Matheus por esse e outros conteúdos do canal tenho adquirido muito conhecimento, principalmente pelo udemy...
Sucesso e abraço !
Aprendi nessa aula oque um curso todo demorei pra aprender, vc é o cara!
Grid é divertido 😂😂😂
Aula top, ajudou muito. Parabens ae
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 explicação
Parabéns Matheus Battisti - Hora de Codar, Excelente conteúdo!
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!
Ó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?
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.
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.
Meu deus, eu tenho aprendido muito com você, tanto no youtube quanto na udemy, espero conseguir minha vaga logo :D
Muito bom!
Muto obrigado
sempre foda meu mano! salve
Show professor!!! 👏👏👏
obrigado! =)
Grande! Atendendo aos pedidos. Valeu, Matheus!
de nada Walter! =D
ótima aula
🔥 Top como sempre! 👏👏👏
valeuu Eric =D
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 =)
Muito bom! Como sempre a didática do Matheus me surpreendendo! vlw mesmo! :)
valeuu Ian!
Excelente
grid é muito legal, mais uma grande aula👏
valeu Andre!
Excelente conteúdo! 👏👏👏👏👏👏👏👏👏
Valeu Luis!
Você explica super bem Matheus!!!
obrigado Francielle! =)
Excelente, obrigado!
valeu Davi!
legal top valeu!
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 UA-cam .
Valeu, chegou na hora certa. Estou vendo seu curso de Tailwind justamente na parte de grid.
showw Sidnei! =)
Brabissimo!
valeuu Augusto! =)
muito bom , aprendi muito sobre grid css
boa! =D
salvou demais na parte de alinhamento individual dos itens
valeu Marcos!
Aula fantástica!
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?
Gostei muito, parabéns professor pela explicação
valeu!
📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecodar.com.br/ebook-melhores-praticas-html-e-css-gratuito/
Top.
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 =))
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
Show!!!
obrigado Beth!
Hoje em dia utilizamos row-gap, column-gap
boa aula. voce tem video , manipulando imagens e textos nessa grid de forma individual também? valeu.
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?
Bom demais!!
Valeu Wallace! Se quiser aprender mais sobre desenvolvimento web, dá uma olhada: horadecodar.com.br/comunidade-hora-de-codar/
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!
Muito Matheus
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!!!
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?
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! =)
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
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!
boa noite tem o cod no repositorio do github?
Como coloco elementos html dentro dessas áreas ?
tem os codigos da aula salvos em algum local?
ja tinha estudado o grid, só que nao aprendi nada kkk mais agrmeu amigo, vou ser um pai do lego
boa! hahaha
meu grid não esta expandindo para toda área html, como eu posso arrumar isso?
vou treinar pacas isso pq pensa numa dificuldade é ajeitar tudo no seu lugar na pagina.
Alguém sabe como o Matheus copia, cola e edita tão rápido a partir do 3:58?
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 😁
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