Auto-fit e Auto-fill com minmax
Crie automaticamente quantidades responsivas de colunas usando auto-fit e auto-fill com minmax().
Auto-fit e Auto-fill com minmax é uma aula grátis de CSS 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
A grade autorresponsiva
O padrão mais poderoso do CSS Grid: uma grade totalmente responsiva que ajusta automaticamente o número de colunas sem nenhuma consulta de mídia, usando auto-fit ou auto-fill combinados com minmax().
auto-fill
auto-fill preenche a linha com o maior número possível de colunas no tamanho mínimo indicado. As colunas vazias são preservadas como trilhas vazias no final.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit funciona como auto-fill, mas recolhe as trilhas vazias até uma largura de zero. Os itens existentes se expandem para preencher o espaço restante.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Diferença entre auto-fill e auto-fit
A diferença só importa quando há menos itens do que o necessário para preencher a linha:
auto-fill: as trilhas de colunas vazias permanecem, e os itens não se expandem para preenchê-lasauto-fit: as trilhas vazias são recolhidas, e os itens se expandem para preencher toda a largura disponível
auto-fit com minmax()
O famoso padrão de grade responsiva — os itens têm pelo menos 250px de largura, crescem para preencher o espaço e quebram automaticamente para novas linhas:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Explicando minmax()
minmax(min, max) define um intervalo de tamanho para uma trilha. A trilha não será menor que min nem maior que max. Combinada com fr, cria trilhas flexíveis limitadas por um mínimo.
<div class="track"><div>Flexible track</div></div>auto-fill com minmax para itens fixos
Quando você quer itens com tamanho fixo e deseja permitir espaço vazio no final:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Responsividade sem consultas de mídia
Este é o principal benefício: repeat(auto-fit, minmax(280px, 1fr)) se adapta automaticamente de uma coluna em dispositivos móveis para o maior número de colunas que couber em telas maiores:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() para um minmax mais seguro
Evite problemas de layout em contêineres muito pequenos usando min(100%, 280px) como mínimo, em vez de um valor bruto em pixels:
<div class="grid"><div>Item</div></div>auto-fill para alinhamento semelhante a alvenaria
Com auto-fill, as trilhas vazias no final mantêm o alinhamento quando a quantidade de itens não é múltipla do número de colunas — isso é útil para manter grades consistentes.
Dimensionamento intrínseco da grade vs. Flexbox
flex-wrap + flex: 1 1 250px do Flexbox é semelhante, mas não garante larguras de coluna iguais — os itens podem se expandir de maneira desigual. A grade com minmax garante trilhas perfeitamente uniformes.
Verificação rápida
Qual valor da grade cria colunas responsivas sem consultas de mídia ao recolher as trilhas vazias para que os itens preencham o espaço disponível?
Recapitulação
repeat(auto-fit, minmax(250px, 1fr)) é o padrão de grade responsiva mais poderoso — não são necessárias consultas de mídia. auto-fit recolhe as trilhas vazias para que os itens preencham a linha. auto-fill preserva as trilhas vazias para manter o alinhamento consistente. Combine-o sempre com gap para criar espaçamentos.
Perguntas Frequentes
A aula “Auto-fit e Auto-fill com minmax” é grátis?
Sim — o texto completo de “Auto-fit e Auto-fill com 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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Auto-fit e Auto-fill com minmax”?
Crie automaticamente quantidades responsivas de colunas usando auto-fit e auto-fill com minmax(). Você pratica CSS 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 CSS Academy?
Nenhuma experiência prévia é necessária. CSS 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 “Auto-fit e Auto-fill com 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 CSS Academy?
Sim. Cada aula de CSS 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
- Linhas Nomeadas e Áreas de Grade Nomeadas
- Auto-fit e Auto-fill com minmax
- Grade Implícita e Grid-Auto-Flow
- Subgrid para Conteúdo Aninhado Alinhado