Estudando este mês:

e mais 853 alunos(as)

Resumo do curso

  • Simplifique a criação de layouts complexos.
  • Posicione elementos com mais facilidade.
  • Utilize grid para calcular e alinhar elementos.
  • Crie templates com mais eficiência e simplicidade.
  • Diga para os elementos onde eles devem se posicionar.
  • Diga para os elementos onde eles devem começar e terminar.

Público alvo

Desenvolvedores(as) front-end e interessados em aprender grid layout

Conteúdo relacionado

Cursos de HTML e CSS em Front-end

Leia nossos artigos de Front-end

Última atualização

08/06/2020

Já é aluno?

Comece o curso agora

8h

p/ conclusão

40

Atividades

108

Minutos de video

8647

Alunos nesse curso

8.7

Nota deste curso

Certificado de participação

Um pouco mais do conteúdo

Descubra se esse curso é pra você lendo as primeiras aulas de CSS Grid: Simplificando layouts

Formações com esse curso

Instrutores

  • Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.

Conteúdo Detalhado

  1. Criando e definindo o layout base e seção de destaques

    • Definindo o template, colunas e linhas
    • Definindo as colunas
    • Definindo as linhas
    • Criando a seção destaques
    • Posicionando elementos
    • Estilizando os destaques
  2. Estilizando a seção de populares

    • A seção de populares
    • Finalizando o populares
    • Calculando tamanho do card
  3. Estilizando o cabeçalho, menu e rodapé

    • Estilizando o cabeçalho
    • O conteúdo e rodapé
    • Centralizando conteúdo
  4. Deixando o site responsivo

    • Seção de destaques
    • Seção de populares
    • Criando uma media query

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

nossos alunos e alunas

Experiências de quem já mergulhou com a gente.

Eu adorei o exercício final, tanto aqui como o do flexbox. Onde você pode praticar em um jogo. Muito bom, eu tive algumas dificuldades, mas utilizando esse jogo, facilitou bastante para mim.

CSS Grid: Simplificando layouts

brunopedrosobatistasantos

Excelente curso! Gostei muito da didática, da forma como o portfólio foi utilizado para uma melhor visualização do conteúdo e os textos complementares foram ótimos para aprofundar os estudos.

CSS Grid: Simplificando layouts

Thiago Pederzolli Machado da Silva

O curso foi bem interessante, explicativo, com boa didática, porém ao jogar o joguinho sugerido na última aula, teve alguns pontos que não foram tratados no curso que poderiam ter sido abordados em uma nova aula, como os template-area com shorthand e a unidade fr. Isso pode ser bem útil a quem aplicar o css grid e também para entender quando analisarmos algum código feito por outro desenvolvedor.

CSS Grid: Simplificando layouts

DANILO KIYOSHI SIMIZU YORINORI

Aprenda HTML e CSS com esse e outros cursos, comece agora!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas