O que você aprenderá_
- Identifique as principais caracteristicas de um layout baseado em grid
- Implemente valores para as alturas das linhas e larguras das colunas
- Modifique o alinhamento vertical e horizontal dos elementos
- Calcule o espaçamento vertical e horizontal entre os elementos
- Integre as propriedades do grid para tornar o layout responsivo
- Construa páginas complexas da web com grid container e grid item
- Crie elementos como cards, menus e barra de rolagem com grid
Público alvo_
Pessoas desenvolvedoras com foco em front-end que querem aprimorar seus conhecimento em layouts responsivos; estudantes que desejam aprender como construir sites que se ajustam de acordo com o tamanho da tela do usuário.
Luan Alves
Sou Luan Alves, estudante de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)
Curso atualizado em 13/10/2023
Já estuda na Alura?
Comece o curso agoraEmenta
Primeiros passos
- Iniciando o WaveCast
- Definindo áreas
- Ajustando colunas no Grid
Avançando no Grid
- Alinhando menu lateral
- Aplicando espaçamento com a propriedade gap
- Criando seções de podcasts
Grid layout responsivo
- Responsividade na seção cartões horizontais
- Definindo linhas e colunas nos cartões horizontais
- Posicionando itens com Grid-area
- Trabalhando com Grid-items - Align-self
Criando Grid com barra de rolagem
- Cartões verticais: definindo colunas
- Posicionando cartões verticais
Layout flexível unindo Grid e Flex
- Quando utilizar Grid ou Flex?
- Ajustando navbar e menu lateral
Descubra se esse curso é pra você! Leia as primeiras aulas
-
Formação
CSS: aprofunde em estilos
6h
De curso
45
Atividades
Escola
Front-end
Pessoas estudando esse curso nesse mês:
Estude com elas
Nathali dos Santos Carlos
Felipe Pinheiro Rocha
Rodrigo Hernandes Martinez
Lucas Vargas Gouvea
Vinicius Mendes Moreira Luz Silva
e mais 367 pessoas
e mais 367 pessoas
Faça parte da nossa comunidade no discord!
Troque conhecimentos com a comunidade da Alura
Aprenda HTML e CSS com esse e outros cursos, comece agora!
Plus
De
R$ 1.800
12X
R$109
à vista
R$1.308
- Acesso a TODOS os cursos da Alura
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramaçã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.
Pro
De
R$ 2.400
12X
R$149
à vista
R$1.788
- Acesso a TODOS os cursos da Alura
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramaçã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.
- Luri powered by ChatGPT
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
- 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.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas