𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Pare de lutar contra seus layouts CSS.
Eu costumava passar horas corrigindo layouts quebrados com Flexbox. Eu tentava envolver itens em uma linha, mas o último item se estendia por toda a tela. Parecia errado. Tentei margens e outros truques, mas nada funcionava.
Então, mudei minha mentalidade para CSS Grid.
A diferença é simples:
- Flexbox é para layouts unidimensionais. Use-o para uma única linha ou uma única coluna.
- CSS Grid é para layouts bidimensionais. Use-o quando precisar controlar tanto linhas quanto colunas ao mesmo tempo.
Pense no Flexbox como uma ferramenta para tarefas pequenas. Pense no Grid como uma ferramenta para toda a estrutura da sua página.
A Armadilha do Flexbox: Quando você usa Flexbox para uma galeria, os itens podem não se alinhar perfeitamente em todos os tamanhos de tela. Frequentemente, você acaba com itens "órfãos" que quebram o ritmo do seu design.
A Solução com Grid: Com o Grid, você pode criar galerias responsivas com apenas uma linha de código.
Use isto: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Isso diz ao navegador para encaixar o máximo de colunas de 250px possível. O navegador faz as contas para você. Chega de adivinhação. Chega de linhas quebradas.
O Exemplo do Dashboard: Construir um dashboard com uma barra lateral, conteúdo principal e um rodapé é difícil com Flexbox. Muitas vezes você precisa de containers aninhados e um código bagunçado para fazer o rodapé ocupar toda a largura.
Com o Grid, você define as trilhas uma única vez: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
Você pode dizer ao rodapé para se estender da primeira coluna até a última usando apenas um comando. Seu código se torna limpo e fácil de ler.
Meu conselho:
• Use Flexbox para alinhamentos simples em cabeçalhos ou botões. • Use Grid para layouts principais de páginas e galerias complexas. • Pare de aninhar containers apenas para corrigir um problema de layout. • Use a unidade fr para distribuir o espaço facilmente.
Tente isso hoje. Pegue um componente antigo que você construiu com Flexbox. Reescreva-o usando CSS Grid. Você verá seu código ficar mais curto e seus layouts mais robustos.