Use subgrid quando cards vizinhos precisam alinhar partes equivalentes mesmo com conteúdos de alturas diferentes. A grade principal define as linhas que os cards podem compartilhar. Cada card organiza seus elementos nessas mesmas linhas, de modo que o título mais alto reserve espaço para os títulos dos outros cards do grupo. A técnica funciona bem em listas nas quais o leitor compara o mesmo tipo de informação, como uma agenda de oficinas ou uma vitrine de projetos.
Escolha o alinhamento que ajuda a leitura
Imagine a programação de um festival de ilustração. Cada card traz dia e horário, nome da oficina, descrição e um link para detalhes. “Cartazes em duas cores” cabe em uma linha. “Narrativas visuais para livros de artista” ocupa duas ou três. Quando os blocos se ajustam independentemente, o leitor que percorre os horários ainda encontra todos no topo, mas precisa procurar as descrições e os links em posições distintas. Uma faixa compartilhada para títulos faz as descrições começarem juntas dentro da mesma fileira.
Faça o teste com os cards lado a lado em um protótipo. Indique quais pontos precisam coincidir e o que essa coincidência facilita. Em uma agenda, vale alinhar horário e título para acelerar a comparação. Já em uma galeria com retratos de proporções diferentes, a variação de altura pode fazer parte da composição. Nesse caso, experimente reservar o alinhamento para a legenda ou manter a variação de propósito. O artigo sobre grid no Penpot para destacar e organizar conteúdo ajuda a separar estrutura, destaque e ritmo antes de entrar no CSS.
Entenda o que o card herda da grade
O CSS Grid permite criar uma grade dentro de outra, mas, em uma grade aninhada comum, as linhas internas têm seu próprio dimensionamento. Ao usar subgrid no eixo das linhas, o card passa a compartilhar a parte das trilhas que ocupa na grade pai. O conteúdo interno participa do cálculo dessas trilhas. Por isso, a altura de um título mais longo pode influenciar a linha equivalente dos cards ao lado, desde que ocupem as mesmas trilhas da grade principal.
Para experimentar, use uma grade externa de três colunas. Faça cada card ocupar quatro trilhas de linha com grid-row: span 4. No card, use display: grid e grid-template-rows: subgrid. Coloque horário, título, descrição e ação como quatro elementos posicionáveis no fluxo desse card. Se acrescentar imagem, cabeçalho agrupado ou um aviso, revise a contagem e o posicionamento. Um bloco com vários filhos ainda ocupa uma posição se o bloco é o item direto da grade. Especificação CSS Grid Layout do W3C e demonstração de subgrid no web.dev.
Desenhe o comportamento dos campos opcionais
Uma oficina gratuita pode pedir um aviso em vez da descrição habitual. Outra pode ter um título e um link, com o restante das informações disponível na página de detalhes. Se a ausência de um campo muda a posição dos itens seguintes no fluxo automático, um link pode cair na linha reservada para descrição. A solução é dar aos blocos semânticos uma posição explícita dentro da estrutura quando a ausência é permitida. Planeje também se o espaço daquela linha será útil quando todos os cards da fileira estiverem sem o mesmo campo.
Teste uma fileira com um card completo e dois incompletos. Depois monte uma fileira sem nenhuma descrição. Observe se o espaço vazio ajuda a separar os itens ou parece uma lacuna sem motivo. No protótipo, use um espaço real de grade e deixe o campo ausente fora da leitura. Inserir um parágrafo vazio ou texto invisível para completar o desenho cria uma dependência frágil. Compartilhe com a equipe qual informação é obrigatória no cadastro e qual pode desaparecer sem mudar a ordem de leitura.
Separe a largura do card do alinhamento entre vizinhos
Quando a grade passa de três colunas para duas, os grupos de comparação mudam. O card que estava na primeira fileira pode virar o primeiro da segunda. Assim, a altura compartilhada se ajusta ao conjunto que está lado a lado. Em uma coluna só, cada card pode voltar a um fluxo interno simples se já não houver vizinhos para alinhar. Confira se o espaçamento continua coerente ao passar pelos pontos intermediários, com a mesma ordem no documento e na tela.
As container queries resolvem uma pergunta complementar. Elas ajudam a adaptar o conteúdo à largura disponível no próprio módulo. Subgrid trata do relacionamento com as trilhas da grade que contém o módulo. Num calendário reaproveitado dentro de uma barra lateral, o card talvez precise empilhar foto e texto por causa da largura local. Já no mural principal, a questão pode ser alinhar os horários. O guia de container queries para cards responsivos detalha o primeiro problema. Teste as duas regras juntas se as duas fizerem parte do mesmo componente.
Prepare uma alternativa simples para ambientes diferentes
Monte primeiro uma grade com cards legíveis, cada um com sua própria altura interna. Você pode usar o fluxo normal ou um layout flexível para manter a ação no fim do card quando as caixas externas têm a mesma altura. Em seguida, introduza subgrid como melhoria onde houver suporte. Se precisar de uma consulta de recurso, avalie a declaração usada no projeto com @supports. Coloque a regra de abrangência das trilhas dentro da mesma condição quando ela só fizer sentido com subgrid. Assim, o layout básico continua coerente em ambientes que ignoram a melhoria.
Para testar, desative a declaração de subgrid no navegador e revise a agenda com os mesmos dados. Títulos e links precisam continuar visíveis e na ordem esperada. Na versão melhorada, use o inspetor de grid para observar quais trilhas são compartilhadas. Se o espaçamento parecer irregular, verifique primeiro o gap da grade principal e os espaçamentos internos do card. Uma margem aplicada ao título em uma variante pode criar um deslocamento mesmo quando as trilhas correspondem.
Um segundo teste pode alternar a ordem de três cards sem mudar os textos. Isso mostra se o resultado depende acidentalmente de um card específico estar na primeira coluna. Em uma lista administrada pelo CMS, a edição pode mover um item, inserir um destaque ou remover uma oficina esgotada. Se essas mudanças forem comuns, teste a última fileira incompleta. Verifique se o alinhamento dos dois cards restantes continua fazendo sentido e se o espaçamento entre fileiras permite identificar onde termina um grupo e começa o próximo.
Quanto conteúdo vale colocar na revisão?
Monte uma amostra com título curto, título longo, descrição ausente e um nome próprio extenso. Combine os casos mais difíceis na mesma fileira. Faça também uma versão com a fonte de fallback, para ver o que muda antes do carregamento da fonte principal. Se um card empurra os vizinhos para baixo a ponto de separar demais informação relacionada, experimente rever a hierarquia, a largura da coluna ou o número de trilhas compartilhadas. Alinhar quatro pontos é uma opção, e alinhar dois pode ser suficiente para a tarefa.
Finalize pedindo a alguém que compare os horários de duas oficinas e encontre os links para os detalhes. Repita com duas colunas e depois em uma largura estreita. Guarde as capturas junto com os dados usados e uma nota sobre os pontos de alinhamento que foram aprovados. Quando a agenda ganhar uma categoria nova ou uma tradução, a equipe terá casos concretos para repetir a revisão sem precisar decorar as medidas do primeiro protótipo.