Aprenda CSS Grid em 30 minutos - Tutorial Grid

📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: https://www.horadecodar.com.br/ebook-melhores-praticas-html-e-css-gratuito/ ★ Nossos Cursos: https://www.horadecodar.com.br/cursos-horadecodar/ 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: https://t.me/horadecodar . 🟣 Discord Hora de Codar: https://discord.gg/Veq4mvsWwk