Grid responsivo CSS
Grid Areas ensinou a nomear o mapa da página. Grid responsivo pergunta o que acontece quando o viewport estreita: colapsam colunas? A barra lateral desce sob o cabeçalho? Os cartões refluem sem outro HTML? Alguns padrões calmos de breakpoint — o módulo Responsive Design vem a seguir.
Caixa de ferramentas grid responsivo
📊 Grid responsivo num relance
| Ferramenta | Tarefa do dia a dia |
|---|---|
grid-template-columns |
Trocar pistas dentro de uma media query (ex.: duas colunas → uma) |
grid-template-areas |
Redesenhar o mapa nomeado quando empilhar vence lado a lado |
repeat(auto-fit, minmax(...)) |
Colunas de cartões fluidas sem breakpoint por quantidade |
| Media query | Aplica mudanças de grid só quando o viewport coincide |
gap |
Mantém o ritmo ao mudar pistas ou mapas |
| Evitar HTML extra por largura | Mesmo DOM; o CSS move o layout |
Comece do grid em que já confia no ecrã largo. Num breakpoint claro mude colunas, linhas ou mapa de áreas — não tudo de uma vez. Os nomes da lição anterior tornam reescritas legíveis.
Colunas num breakpoint
Quando uma shell de duas colunas deve ser uma no telemóvel, altere grid-template-columns numa media query.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Redesenhe o mapa de áreas em ecrãs estreitos
Mapas header / aside / main lado a lado costumam precisar de um novo bloco grid-template-areas quando a barra vai sob o cabeçalho. Reescreva linhas entre aspas; regiões retangulares.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit e minmax para grelhas de cartões
Em galerias e dashboards, repeat(auto-fit, minmax(...)) deixa colunas aparecer e quebrar conforme o espaço — muitas vezes com menos breakpoints manuais.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Viewport estreito não é outra linguagem de layout — mesmas ferramentas grid, outras pistas ou mapas. Prefira CSS a duplicar markup «móvel».
Hábito calmo de grid responsivo
Um breakpoint principal primeiro. Emparelhe mudança de colunas com reescrita do mapa quando rótulos ajudam. auto-fit onde a contagem de cartões deve flexionar. Ordem DOM sensata. Teoria responsive completa no módulo seguinte.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Experimente
- Passe shell de duas colunas para uma sob
max-width: 40rem. - Reescreva mapa header / aside / main / footer para empilhar em estreito.
- Linha de cartões com
repeat(auto-fit, minmax(14rem, 1fr)). - Um breakpoint calmo — não resete toda a grelha de uma vez.
- Uma árvore HTML; a seguir Responsive Design no curso.
Erros comuns
- Encolher pistas para sempre em vez de mudar colunas ou empilhar
- HTML «móvel» separado em vez de atualizar grid em CSS
- Contagem de células errada ao reescrever
grid-template-areas - Uma media query gigante que reseta tudo
- Tratar esta lição como todo o curso Responsive
Resumo
- Grid responsivo adapta colunas, mapas e grelhas auto-fit à largura
- Media queries limitam mudanças de pistas e mapas
- Áreas nomeadas combinam com reescritas em ecrãs pequenos
- Breakpoints calmos e um DOM
- Módulo Grid (490–530) completo; segue Responsive Design
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo