Aprenda CSS Grid em 30 minutos - Tutorial Grid

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

[apenasumgeekeumotakutendoo]

Esses grid-row-gap e grid-column-gap hoje em dia são obsolutos, utilizamos hoje row-gap e column-gap! Espero ter ajudado!

[nikatoooo]

me salvou muito tempo apanhando para os float e inline-block

[gilsonhenrique]

Ó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

[AndrewsViegasLeal]

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.

[sabrinacampos]

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

[daviddean]

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.

[Franklinx]

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.

[alexandremarques]

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!👏👏

[wesleyalves]

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!

[InteligenciaJ]

Gostei muito, parabéns professor pela explicação

[fellipefernandez]

Meu deus, eu tenho aprendido muito com você, tanto no youtube quanto na udemy, espero conseguir minha vaga logo :D

[walterbranco]

Grande! Atendendo aos pedidos. Valeu, Matheus!

[in]

Aprendi nessa aula oque um curso todo demorei pra aprender, vc é o cara!

[sidneisimeao]

Valeu, chegou na hora certa. Estou vendo seu curso de Tailwind justamente na parte de grid.

[kaue]

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!

[hangtime]

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.

[MarcosAF]

salvou demais na parte de alinhamento individual dos itens

[lucasviniciosmartins]

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.

[ianchristani]

Muito bom! Como sempre a didática do Matheus me surpreendendo! vlw mesmo! :)

[diegospinola]

Parabéns Matheus Battisti - Hora de Codar, Excelente conteúdo!