Como o CSS Subgrid Resolve o Alinhamento de Cards

Quem desenvolve para a web sabe o martírio que é tentar alinhar verticalmente elementos dentro de cards dispostos lado a lado. Se o título de um card ocupa duas linhas e o do vizinho ocupa apenas uma, a estrutura visual quebra, deixando botões desalinhados ou textos desconexos.

Felizmente, o recurso CSS Subgrid resolve essa dor de cabeça de forma nativa e extremamente elegante.

O Problema dos Grids Aninhados Tradicionais

Até a chegada do subgrid, para criar um layout de cards, definíamos um grid pai. No entanto, cada card era um grid independente. Seus filhos (cabeçalho, corpo do texto e botão de ação) não sabiam o tamanho dos filhos do card ao lado.

A solução clássica envolvia limitar caracteres no backend, definir alturas fixas (o que quebra acessibilidade e zoom) ou usar JavaScript pesado no cliente para calcular a altura máxima.

Como o CSS Subgrid Resolve Isso

Com o subgrid, você pode instruir o grid filho a herdar a definição de linhas ou colunas do grid pai. Dessa forma, todos os cards na mesma linha do grid compartilham a mesma estrutura de alturas.

Exemplo Prático de Código CSS

Veja como estruturar o CSS de forma robusta e moderna:

/* O container pai que define o grid principal */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Cada card ocupará 3 linhas no grid pai */
  grid-auto-rows: max-content max-content max-content;
  gap: 24px;
}

/* O card que herda a definição de linhas do pai */
.card {
  display: grid;
  /* Define que o card se estende por 3 linhas do pai */
  grid-row: span 3;
  /* O segredo: as linhas internas usam a definição do pai */
  grid-template-rows: subgrid;
  background: #1e1e1e;
  border-radius: 8px;
  padding: 16px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.card-body {
  color: #a0a0a0;
}

.card-button {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 4px;
}

<!-- Estrutura HTML Simples -->
<div class="card-grid">
  <div class="card">
    <h3 class="card-title">Título Curto</h3>
    <p class="card-body">Texto curto de exemplo.</p>
    <button class="card-button">Ver Mais</button>
  </div>
  <div class="card">
    <h3 class="card-title">Título Longo Que Ocupa Duas Linhas Sem Quebrar Layout</h3>
    <p class="card-body">Texto mais longo e descritivo que em layouts antigos empurraria o botão para baixo.</p>
    <button class="card-button">Ver Mais</button>
  </div>
</div>

Benefícios do Subgrid

1. Acessibilidade Preservada: Se o usuário aumentar o tamanho da fonte, as linhas continuam se ajustando uniformemente de forma automática.
2. Zero JavaScript: Reduz a necessidade de scripts de redimensionamento e reflow de tela na renderização inicial.
3. Layout Limpo: Código enxuto e fácil de manter.