Layout

Grade bento

Bento grid

Organiza blocos de tamanhos diferentes em uma composição modular.

SEU MÊSUma ideia
por vez.

12projetos

84%concluído

Comece algo novo ↗

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

Quando usar

Destacar informações com diferentes prioridades em uma grade.

Cuidados e acessibilidade

A ordem de leitura deve continuar lógica sem depender da composição visual.

Partes e comportamento

Grade com blocos que ocupam diferentes quantidades de linhas e colunas.

Não confunda

É uma forma de compor a grade. Não exige um framework ou proporções universais.

Exemplo de código

.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.destaque { grid-column: span 2; }
@media (max-width: 40rem) {
  .grade { grid-template-columns: 1fr; }
  .destaque { grid-column: auto; }
}

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 bento (Bento grid) em português do Brasil. Organiza blocos de tamanhos diferentes em uma composição modular. Contexto de uso: Destacar informações com diferentes prioridades em uma grade. Estrutura: Grade com blocos que ocupam diferentes quantidades de linhas e colunas. Referência técnica: display: grid. Requisito: A ordem de leitura deve continuar lógica sem depender da composição visual. Considere também: É uma forma de compor a grade. Não exige um framework ou proporções universais. 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 ↗