Layout

Grade responsiva

Responsive grid

Ajusta o número e a largura das colunas ao espaço disponível.

010203040506

Exemplo didático · Representação visual do padrão

Quando usar

Organizar listas de cartões em telas de tamanhos variados.

Cuidados e acessibilidade

Teste palavras longas, zoom de texto e itens que não podem encolher.

Partes e comportamento

Colunas que redistribuem espaço conforme a largura disponível.

Não confunda

Responsividade inclui comportamento, texto e toque, não apenas reduzir o número de colunas.

Exemplo de código

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

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Grade responsiva (Responsive grid) em português do Brasil. Ajusta o número e a largura das colunas ao espaço disponível. Contexto de uso: Organizar listas de cartões em telas de tamanhos variados. Estrutura: Colunas que redistribuem espaço conforme a largura disponível. Referência técnica: grid-template-columns. Requisito: Teste palavras longas, zoom de texto e itens que não podem encolher. Considere também: Responsividade inclui comportamento, texto e toque, não apenas reduzir o número de colunas. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗