Layout com Flexbox e Grid

Escolher a relação que o layout precisa

Flexbox organiza itens num eixo principal e pode criar várias linhas, cada uma com distribuição de espaço independente. Grid define tracks que podem alinhar cartões entre linhas e colunas. Numa barra de ações, Flexbox permite ajustar o espaço entre botões.

Num catálogo em que as colunas devem alinhar entre várias linhas, Grid exprime melhor esse contrato. A escolha deve partir da relação entre os itens, sem assumir que uma tecnologia substitui sempre a outra.

Identificar eixos e caixas filhas

No exemplo, a barra usa row em horizontal-tb: o eixo principal é horizontal e align-items atua no transversal. Se mudar para column, justify-content passa a operar ao longo da coluna. Os articles filhos diretos do catálogo são grid items; os seus títulos não passam automaticamente a pertencer à mesma grelha.

Introduzir um wrapper altera quais caixas participam no layout, tal como pode alterar a correspondência de seletores. Regista a árvore de caixas antes de ajustar alinhamentos.

Repartir espaço adicional

Flex-grow reparte espaço livre a partir das bases; fatores iguais não garantem larguras finais iguais. Com 500px disponíveis e bases de 100px e 200px, sobram 200px. Dois fatores de crescimento iguais a um acrescentam 100px a cada item, produzindo 200px e 300px.

Esta conta exclui gaps, margens e limites min/max. Se houver falta de espaço, flex-shrink e os limites mínimos entram noutra fase; não uses a conta de crescimento para explicar automaticamente todos os resultados de redução.

Mínimos que impedem encolher

Um item flex com min-width: auto pode ficar limitado pela largura mínima do conteúdo. Numa palavra sem quebra, aumentar flex-shrink pode não resolver o transbordo da caixa. Min-width: 0 remove esse mínimo automático, mas não ensina o texto a quebrar nem recorta o conteúdo.

Em Grid, minmax(0, 1fr) distingue um mínimo explícito zero de uma track 1fr com mínimo automático. Trata o dimensionamento da caixa e o comportamento do seu conteúdo como decisões relacionadas, cada uma com consequências próprias.

Tracks, gaps e linhas implícitas

Na grelha de duas colunas do exemplo, o gap ocupa espaço entre as tracks. Com 620px de conteúdo e um gap de 20px, restam 600px para duas frações iguais: 300px por coluna, dadas as restrições explícitas do exemplo. As linhas adicionais geradas para acomodar os artigos pertencem à grelha implícita.

Grid-auto-rows controla essas linhas, enquanto grid-template-columns define as colunas explícitas. Não confundas criar uma track com aumentar o espaço entre tracks.

Repetição automática e conteúdo variável

Repeat(auto-fill, minmax(160px, 1fr)) cria tantas tracks repetidas quanto as condições de tamanho permitem. Auto-fit acrescenta uma diferença após colocar os itens: as tracks repetidas vazias colapsam, incluindo os gaps associados. Uma track atravessada por um item não é vazia para esta regra.

Usa a distinção para decidir se o catálogo deve conservar espaços para possíveis cartões ou distribuir o espaço pelos existentes; não representa duplicação de conteúdo nem alteração da ordem do documento.

Conservar uma sequência significativa

Order e grid-auto-flow: dense podem alterar a sequência visual sem reescrever o DOM ou a navegação sequencial habitual. Numa galeria sem sequência obrigatória, preencher lacunas pode ser aceitável; num formulário com passos dependentes, pode colocar o terceiro passo antes do segundo.

Os exercícios excluem scripts, tabindex especial e mecanismos adicionais de ordem de leitura. Avalia a sequência estrutural e a visual; uma grelha sem espaços vazios não demonstra que o utilizador encontra as ações na ordem correta.

Armadilhas comuns

Confundir flex-grow com largura final; ignorar gaps; pensar que min-width: 0 corrige texto; aplicar dense a passos dependentes; presumir que todos os descendentes são grid items.