CSS Grid: template-areas auto-fit minmax
Dê nomes às áreas da grade para criar layouts legíveis, use auto-fit com minmax() para colunas responsivas e controle as trilhas implícitas.
CSS Grid: template-areas auto-fit minmax é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Áreas de modelo nomeadas — layout visual
grid-template-areas permite nomear regiões em um formato visual de ASCII. Cada cadeia representa uma linha; cada palavra representa uma célula. Pontos (.) representam células vazias. Atribua os elementos com grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Áreas de modelo responsivas com consultas de mídia
Altere o layout de template-areas nos pontos de quebra para mover a barra lateral de uma coluna para baixo da área principal em dispositivos móveis.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit versus auto-fill
auto-fit: recolhe as trilhas vazias para que os itens se estendam e preencham a linha. auto-fill: mantém a estrutura da grade mesmo quando as trilhas estão vazias. Para grades responsivas de cartões, auto-fit quase sempre é o que você deseja.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() em detalhes
minmax(min, max) define uma trilha que tem no mínimo min e no máximo max. Combinações comuns: minmax(0, 1fr) (totalmente flexível), minmax(200px, 1fr) (responsiva com um mínimo), minmax(auto, auto) (dimensionada de acordo com o conteúdo).
Colunas e linhas que ocupam várias células
Use grid-column: span 2 para fazer um item ocupar duas colunas. Combine-o com grid-row: span 2 para criar um item em destaque que ocupa um bloco de 2×2 na grade.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Posicionamento automático denso
grid-auto-flow: dense preenche novamente os espaços vazios com itens menores. Isso é útil para layouts semelhantes a alvenaria, nos quais os itens têm tamanhos variados.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Unidades fracionárias e porcentagens
A unidade fr sempre se refere ao espaço disponível depois que as trilhas de tamanho fixo e os espaços são subtraídos. Misturar fr com tamanhos fixos oferece a máxima flexibilidade: uma barra lateral fixa e uma área principal flexível.
grid-auto-columns e grid-auto-rows
Essas propriedades controlam o tamanho das trilhas criadas implicitamente (quando os itens são posicionados fora da grade explícita). grid-auto-rows: minmax(100px, auto) dá às linhas implícitas uma altura mínima.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Inspecionando a grade no DevTools
O Chrome DevTools sobrepõe as linhas da grade e os nomes das áreas na página quando você clica no indicador 'grid' ao lado de um contêiner de grade no painel Elements. Use-o para depurar tamanhos inesperados de trilhas e o posicionamento dos itens.
Subgrid do CSS
grid-template-columns: subgrid permite que uma grade aninhada se alinhe às trilhas da grade pai. É compatível com todos os navegadores modernos desde 2023 — essencial para alinhar o conteúdo interno dos cartões em uma grade de cartões.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Quando Grid é melhor que Flexbox
Grid é a melhor escolha quando você precisa de controle bidimensional explícito — quando tanto as linhas quanto as colunas importam. Se você só quer itens em uma linha ou em uma pilha, Flexbox é mais simples.
Verificação rápida
Qual valor do CSS Grid cria tantas colunas quanto couberem, com no mínimo 200px, fazendo cada coluna compartilhar igualmente o espaço restante?
Recapitulação: CSS Grid avançado
grid-template-areas cria layouts nomeados e fáceis de ler. auto-fit + minmax cria grades responsivas sem consultas de mídia. Faça os itens ocuparem várias colunas e linhas. O posicionamento automático denso preenche os espaços vazios. Use a sobreposição de grade do DevTools para depurar. Subgrid alinha itens aninhados às trilhas pai.
Perguntas Frequentes
A aula “CSS Grid: template-areas auto-fit minmax” é grátis?
Sim — o texto completo de “CSS Grid: template-areas auto-fit minmax” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “CSS Grid: template-areas auto-fit minmax”?
Dê nomes às áreas da grade para criar layouts legíveis, use auto-fit com minmax() para colunas responsivas e controle as trilhas implícitas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “CSS Grid: template-areas auto-fit minmax”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Aprofundamento em Flexbox: alinhamento, quebra e ordem
- CSS Grid: template-areas auto-fit minmax
- Combinando Flexbox e Grid
- Variáveis CSS para temas