Imagem do Curso gratuito CSS Grid Curso Completo

Curso online gratuitoCSS Grid Curso Completo

Duração do curso online: 1 horas e 15 minutos

Novo

Crie layouts responsivos de verdade com CSS Grid: domine colunas, áreas e alinhamento em um curso online gratuito, com exercícios e certificado.

Neste curso gratuito, aprenda sobre

  • Terminologia do CSS Grid: contêiner grid, itens, trilhas (rows/cols), linhas e células
  • Quando usar CSS Grid vs Flexbox: diferença 2D (grid) vs 1D (flex) e complementaridade
  • Criar sua primeira grade: display:grid, grid-template-columns/rows e organização básica
  • Controlar espaçamento entre linhas/colunas com gap (shorthand row-gap/column-gap)
  • Definir trilhas com repeat() e minmax() para layouts mais flexíveis e responsivos
  • Usar a unidade fr para distribuir espaço restante igualmente (ex.: 1fr 1fr 1fr)
  • Alinhamento no grid: justify-items/align-items (células) e justify-content/align-content (grade)
  • Posicionamento/ocupação: grid-column e grid-row (start/end), inclusive o atalho start / end
  • Entender -1 em grid-column/grid-row: referência à última linha do grid
  • Diferença prática entre usar linhas relativas (1/-1) e absolutas (2/5) ao posicionar itens
  • Adaptar para telas menores: mudar para 1 coluna e reorganizar com media queries e templates
  • Sobreposição de conteúdo: posicionar itens na mesma área/linhas e controlar empilhamento
  • Criar layouts com áreas nomeadas: grid-template-areas + grid-area e uso de . como espaço vazio
  • auto-fill/auto-fit e nomes de linha (track names) para grids responsivos e manutenção do código

Descrição do curso

Aprender CSS Grid é um divisor de águas para quem desenvolve interfaces e quer criar layouts modernos com muito mais controle, organização e previsibilidade. Neste curso online gratuito, você vai do vocabulário essencial da especificação até a construção de páginas completas, entendendo como pensar em linhas, colunas e áreas para transformar um layout “difícil de montar” em algo simples de manter e escalar.

Ao longo das aulas, você vai construir sua primeira grade e evoluir rapidamente para técnicas que aparecem no dia a dia do Front-End: espaçamentos consistentes com gap, definição inteligente de colunas e linhas com repeat() e minmax(), e o uso prático da unidade fr para distribuir espaço de forma fluida. Em vez de decorar propriedades, o foco é compreender o raciocínio por trás do Grid e como ele se relaciona (e se diferencia) do Flexbox na prática, para você escolher a ferramenta certa para cada tipo de layout.

Você também vai dominar alinhamento de conteúdo nos dois eixos, aprender a posicionar e fazer elementos ocuparem intervalos específicos da grade, incluindo padrões como ocupar do início ao fim, trabalhar com a última linha, e adaptar o desenho para telas menores com decisões corretas de responsividade. Quando chegar o momento de criar estruturas mais complexas, você verá como lidar com sobreposição de conteúdo, como simplificar posicionamentos e como escrever regras mais legíveis com áreas nomeadas.

Para ganhar velocidade e flexibilidade, o curso aborda recursos como auto-fill e auto-fit, além do uso de nomes de linha para deixar seu CSS mais semântico e fácil de refatorar. A parte prática fecha o aprendizado com a montagem de múltiplos layouts completos, conectando tudo o que foi estudado, com exercícios para fixação. Se você busca fortalecer seu portfólio e produzir interfaces responsivas com qualidade profissional, este curso é um caminho direto para colocar CSS Grid em produção.

Conteúdo do curso

  • Aula em vídeo: Terminologia CSS Grid - Curso CSS Grid - Aula 1 02m
  • Exercício: Em CSS Grid, como é chamado o elemento que define o Grid e contém os itens?
  • Aula em vídeo: CSS Grid substitui Flexbox? - Curso CSS Grid - Aula 2 02m
  • Exercício: Qual é a diferença mais fundamental entre Flexbox e CSS Grid?
  • Aula em vídeo: Sua Primeira Grid - Curso CSS Grid - Aula 3 08m
  • Exercício: Qual propriedade define o espaçamento (gap) de forma abreviada entre linhas e colunas em um CSS Grid?
  • Aula em vídeo: repeat() e minmax() - Curso CSS Grid - Aula 4 03m
  • Exercício: Qual é a forma correta de definir 3 colunas de 200px usando a função repeat() no CSS Grid?
  • Aula em vídeo: A Nova Unidade CSS fr - Curso CSS Grid - Aula 5 02m
  • Exercício: No CSS Grid, qual é o efeito de definir colunas como 1fr 1fr 1fr em grid-template-columns?
  • Aula em vídeo: Alinhamento de Conteúdo - Curso CSS Grid - Aula 6 04m
  • Exercício: Qual combinação de propriedades centraliza totalmente o conteúdo dentro das células de um CSS Grid (nos dois eixos)?
  • Aula em vídeo: Ocupando Espaços com CSS Grid (parte 1) - Curso CSS Grid - Aula 7 03m
  • Exercício: No CSS Grid, ao usar a propriedade abreviada grid-column, o que significa o valor -1 no segundo parâmetro (ex.: grid-column: 2 / -1;)?
  • Aula em vídeo: Ocupando Espaços com CSS Grid (parte 2) - Curso CSS Grid - Aula 8 04m
  • Exercício: No CSS Grid, qual a diferença prática entre usar "1 / -1" e usar "2 / 5" em grid-column?
  • Aula em vídeo: Ocupando Espaços com CSS Grid (parte 3) - Curso CSS Grid - Aula 9 03m
  • Exercício: Ao adaptar um layout com CSS Grid para telas menores, qual mudança é mais adequada para empilhar os itens verticalmente (uma coluna)?
  • Aula em vídeo: Sobreposição de Conteúdo com CSS Grid - Curso CSS Grid - Aula 10 04m
  • Exercício: Qual é a forma simplificada de definir início e fim do posicionamento em linhas no CSS Grid?
  • Aula em vídeo: Áreas de Grid - Curso CSS Grid - Aula 11 07m
  • Exercício: Para montar um layout com áreas nomeadas no CSS Grid, qual combinação de propriedades é usada corretamente?
  • Aula em vídeo: auto-fill e auto-fit - Curso CSS Grid - Aula 12 02m
  • Aula em vídeo: Nomes de Linha em CSS Grid (parte 1) - Curso CSS Grid - Aula 13 04m
  • Exercício: Em CSS Grid, qual é a principal vantagem de usar nomes de linha (track names) na definição de colunas?
  • Aula em vídeo: Nomes de Linha em CSS Grid (parte 2) - Curso CSS Grid - Aula 14 04m
  • Exercício: Ao usar nomes de linhas (tracks) no CSS Grid, quando você define apenas grid-column-start com um nome terminado em start, o que acontece?
  • Aula em vídeo: CSS Grid na Prática - Layout 1 - Curso CSS Grid - Aula 15 04m
  • Exercício: No uso de grid-template-areas, qual é a função de colocar um . (ponto) em uma posição do template?
  • Aula em vídeo: CSS Grid na Prática - Layout 2 - Curso CSS Grid - Aula 16 07m
  • Aula em vídeo: CSS Grid na Prática - Layout 3 - Curso CSS Grid - Aula 17 05m
  • Exercício: Qual combinação de CSS define corretamente o contêiner principal como Grid com espaçamento entre os itens e limite de largura centralizado?

Este curso gratuito inclui:

1 horas e 15 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso