Adapte layouts para qualquer tela
Use Grid e media queries para layout responsivo.
- Criar grid com breakpoint orientado ao conteúdo.
Grid organiza em linhas e colunas; media query aplica regras por condição de viewport.
1.cards {
2 display: grid;
3 grid-template-columns: 1fr;
4 gap: 16px;
5}
6
7@media (min-width: 700px) {
8 .cards {
9 grid-template-columns: repeat(3, 1fr);
10 }
11}One column on narrow screens, three columns on wider screens
Comece com layout estreito e evolua quando conteúdo pedir mais espaço.
Principais conclusões
Criar grid com breakpoint orientado ao conteúdo.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Torne cartões responsivos
Use Grid em .cards: 1 coluna abaixo de 700px e 3 colunas iguais em 700px+.
- Layout estreito
- Layout amplo
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…