CSS css

Grade de cards responsiva sem media query

Uma grade fluida que cria tantas colunas quanto couberem e reorganiza os cards automaticamente.

Código 
.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}

.card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}

Quando usar

Use em listas de produtos, ferramentas, artigos ou serviços com cards de largura mínima semelhante.

Como adaptar ao seu projeto

Ajuste os 16rem conforme o menor tamanho aceitável para cada card e controle o espaçamento pela propriedade gap.

Antes de publicar

Conteúdos muito diferentes em altura podem deixar a grade irregular. Teste títulos longos e telas estreitas.

Códigos relacionados

CSS

Centralizar conteúdo com CSS Grid

A forma curta de centralizar um elemento horizontal e verticalmente, sem posicionamento absoluto.

 CSS

Limitar texto a duas ou três linhas com CSS

Recorte visual para resumos de cards, preservando o texto completo no HTML.

 Git

.gitignore para um projeto web

Base conservadora que evita versionar dependências, segredos locais, logs e arquivos gerados.