A Unidade fr e Repeat
Use a unidade fr fracionária e a função repeat() para criar trilhas de grid flexíveis.
A Unidade fr e Repeat é 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.
O que é a unidade fr?
A unidade fr (fracionária) é exclusiva da Grade CSS. Ela representa uma fração do espaço livre restante no contêiner de grade, depois que todas as trilhas não flexíveis são dimensionadas.
Exemplo simples com fr
Duas colunas iguais, cada uma recebendo metade do espaço disponível:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>Trilhas mistas
O espaço de fr é calculado depois que as trilhas fixas são subtraídas:
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>Frações desiguais
Valores diferentes de fr criam colunas proporcionais:
<div class="thirds" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>A função repeat()
repeat() evita repetir o mesmo tamanho de trilha. O primeiro argumento é a quantidade; o segundo é o tamanho da trilha.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>repeat() com trilhas mistas
Você pode repetir um padrão de trilhas:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>auto-fill
repeat(auto-fill, ...) cria a quantidade máxima de colunas que cabe no contêiner com o tamanho especificado. As trilhas vazias são preservadas no final.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>auto-fit
repeat(auto-fit, ...) funciona como auto-fill, mas recolhe as trilhas vazias, permitindo que os itens existentes se expandam para preencher o contêiner.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>minmax() em repeat
minmax(min, max) define um intervalo de tamanhos para uma trilha. Combinado com auto-fit, cria uma grade adaptável sem consultas de mídia:
<div class="responsive-grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>fr versus porcentagem
Ao contrário das porcentagens, fr exclui automaticamente o espaço dos espaçamentos. 1fr 1fr com um espaçamento de 24px fornece duas colunas iguais sem nenhum cálculo. O cálculo equivalente com porcentagens seria calc(50% - 12px).
fr com min-content e max-content
Combine fr com dimensionamento baseado no conteúdo para criar disposições mistas:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>Verificação rápida
O que repeat(auto-fit, minmax(200px, 1fr)) cria?
Recapitulação
A unidade fr distribui proporcionalmente o espaço restante da grade. repeat() evita declarações repetitivas de trilhas. O poderoso padrão repeat(auto-fit, minmax(250px, 1fr)) cria grades de cartões totalmente adaptáveis, sem necessidade de consultas de mídia.
Perguntas Frequentes
A aula “A Unidade fr e Repeat” é grátis?
Sim — o texto completo de “A Unidade fr e Repeat” é 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 “A Unidade fr e Repeat”?
Use a unidade fr fracionária e a função repeat() para criar trilhas de grid flexíveis. 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 “A Unidade fr e Repeat”?
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
- Display Grid e Colunas e Linhas de Modelo
- A Unidade fr e Repeat
- Gap e Posicionamento no Grid
- Áreas de Modelo do Grid