Design de grade Bento: O guia de layout de interface do usuário para 2026

A linha de destaque com três colunas está morta. Morreu há dois anos e a maioria dos designers ainda não a adaptou.

Você sabe qual é. Três colunas iguais, cada uma com um ícone, um título e um parágrafo, empilhadas em dispositivos móveis. Todo site de SaaS criado entre 2018 e 2023 tinha uma. Ela vendia uma mentira: a de que seu produto tinha três funcionalidades, cada uma valendo exatamente 33% da atenção. A atenção nunca foi igual para todos, e os leitores pararam de ler essas seções no mesmo ano em que o TikTok os ensinou que densidade é uma característica, não um defeito.

A grade Bento venceu porque admite o que a linha de destaque nunca admitiu: algumas coisas são maiores que outras, e o leitor deve saber disso à primeira vista. Para entender melhor o padrão por trás disso, veja hierarquia visual. As páginas para Mac da Apple são o exemplo mais claro de como isso funciona na prática.

O que é, na realidade, uma grade bento

Uma grade bento é um padrão de layout onde uma seção é dividida em células retangulares desiguais, cada uma contendo um conteúdo distinto, dispostas de forma que toda a grade seja percebida como uma composição unificada.

O nome vem da marmita japonesa bento. Compartimentos de tamanhos diferentes, cada um contendo algo diferente, organizados para serem visualmente equilibrados como um todo. Não uma fileira de colunas idênticas. Não uma pilha de seções narrativas. Uma única composição com hierarquia interna deliberada.

O padrão possui três características essenciais. Primeiro, células desiguais, geralmente construídas em uma grade de 3 ou 4 colunas, com algumas células abrangendo várias colunas ou linhas. Segundo, conteúdo variado por célula (um gráfico em uma, uma ilustração em outra, uma métrica em uma terceira, um depoimento em uma quarta). Terceiro, coerência visual em todo o conjunto, geralmente por meio de um tratamento de fundo compartilhado, raios de borda consistentes e uso moderado de cores.

O que não é: uma demonstração da ⟦MARCA0⟧. Um layout em mosaico. Um feed do Pinterest. Uma disposição aleatória de cards. O Bento é composicional, não algorítmico.

Uma grade Bento é compressão. Uma linha de destaque é narrativa. A maioria dos produtos precisa de compressão.

Por que substituiu a linha de destaque

Três razões. Duas delas óbvias. Uma delas é o motivo pelo qual o padrão se consolidou.

Primeira razão: tempo de permanência. Testes internos da ⟦MARCA11⟧ em páginas de marketing mostraram que as seções Bento retinham os visitantes aproximadamente 47% mais tempo do que as linhas de destaque equivalentes. O motivo não é um mistério, é simplesmente que um leitor pode percorrer uma grade Bento rapidamente. Não há uma ordem de leitura obrigatória. Eles acessam a página, escolhem a célula que lhes interessa e permanecem nela.

Segunda razão: densidade sem paredes de texto. Uma grade Bento bem projetada comunica de seis a oito informações no espaço que um layout tradicional usaria para três. Como as células contêm diferentes tipos de conteúdo (visual, estatístico, textual, depoimento), o leitor não percebe a densidade como pesada.

Terceiro motivo (o verdadeiro): corresponde à forma como os produtos modernos são realmente vendidos. A maioria dos produtos SaaS em 2026 não se resume a três funcionalidades. Trata-se de uma plataforma com uma funcionalidade principal, de três a cinco funcionalidades de apoio, uma história de integração, um ponto de vista e, talvez, uma funcionalidade específica que mereça destaque. Esse formato não se encaixa em uma linha de três colunas. Ele se encaixa em um bento. O layout se adaptou ao conteúdo onde ele estava.

| Padrão | Adequado para esta história | Inadequado para esta história |

|---------|-----------------|------------------| | Linha de funcionalidades de três colunas | Três funcionalidades iguais, produto narrativo | Plataformas com peso desigual de funcionalidades | | Pilha de funcionalidades (linhas de largura total) | Explicações detalhadas de funcionalidades | Necessidade de mostrar a abrangência rapidamente | | Grade bento | Plataformas, suítes, painéis, páginas de prova | Tutoriais Linear, fluxos passo a passo |

As três melhores implementações reais no momento

Apple (apple.com/mac). Já mostrado acima. Todas as páginas de produtos Mac a partir do final de 2022 usam o padrão Bento. As seções do chip da série M apresentam o padrão mais limpo: uma célula dominante para o visual do chip, células menores para benchmarks e casos de uso. Fundo escuro compartilhado, raio de canto compartilhado, espaçamento interno consistente. O chip é sempre visualmente dominante. Essa é uma escolha editorial, não da grade.

Linear (linear.app/features). Bento para ferramentas de desenvolvimento. A página de recursos é uma pilha de Bentos de 4 colunas, onde a funcionalidade principal (rastreamento de problemas, planejamento, desenvolvimento) ocupa uma célula 2x2 e recursos menores recebem células 1x1 ou 1x2. A versão da Linear é famosa por sua sobriedade: apenas capturas de tela de produtos, sem ilustrações genéricas, rótulos monoespaçados. Ela se assemelha a uma ficha técnica, propositalmente.

Vercel (vercel.com). O bento da página inicial da Vercel é a versão híbrida. Algumas células contêm ilustrações, outras capturas de tela de produtos e outras ainda apenas texto. Elas provam que é possível misturar mídias em um único bento sem que pareça inconsistente, desde que todas as células compartilhem a mesma linguagem visual (mesmo fundo, mesmo raio, mesmo ritmo de espaçamento interno).

Três setores diferentes, três tons diferentes, o mesmo padrão subjacente. O padrão não é uma questão de moda. É um layout para um problema de comunicação específico: "fazemos muitas coisas, aqui estão elas em resumo, escolha a que lhe interessa."

A matemática da grade (mais simples do que parece)

A maioria das grades Bento usa uma das duas estruturas básicas.

A grade Bento de 3 colunas. Boa para seções compactas, depoimentos e destaques de recursos. Padrão típico:

• Uma célula principal 2x1 (abrange 2 colunas e 1 linha)
• Uma célula 1x1 (1 coluna e 1 linha)
• Duas células 1x1 em uma segunda linha
• Uma célula 1x2 para algo que se beneficia de peso vertical

A grade Bento de 4 colunas. Melhor para seções completas com mais largura. Padrão típico:

• Uma célula principal 2x2
• Duas células 1x1 empilhadas ao lado
• Uma célula 2x1 na parte inferior
• Uma célula 1x1 para fechar a linha

Você pode construir uma grade Bento em ⟦MARCA1⟧ em cerca de vinte linhas:

⟦CÓDIGO0⟧

Aplique as classes aos filhos e a grade se organizará automaticamente. A matemática é realmente simples assim. O que torna o Bento difícil não é a grade em si, mas sim a decisão editorial sobre quais células merecem destaque.

Regras responsivas que não falham

O Bento para desktop é fácil. O Bento para dispositivos móveis é onde a maioria das implementações falha.

O erro: manter o formato da grade e reduzir tudo. Com 390px de largura, um Bento de 4 colunas se torna quatro colunas de 90px, o que é inútil. As células não conseguem conter conteúdo real.

A regra: reorganizar, não reduzir. Em dispositivos móveis, a grade do Bento se reduz a uma única coluna, mas a ordem das células muda para preservar a hierarquia.

Regras responsivas que não falham - A célula principal é movida para o topo (maior impacto visual primeiro em dispositivos móveis)

• Células de largura 2x1 tornam-se células de coluna única de largura total
• Células de altura 1x2 tornam-se células de altura padrão, sem serem esticadas verticalmente
• A ordem é redefinida pela importância, não pela posição visual em desktops

CSS Grid facilita isso com grid-template-areas e media queries. Ou, no Tailwind: use prefixos lg: para aplicar spans bento apenas em telas grandes e deixe que a pilha padrão para dispositivos móveis se ajuste automaticamente.

| Ponto de interrupção | Comportamento da grade |

|------------|---------------|

| Desktop (1280px+) | Bento completo, 4 colunas com spans variados | | Tablet (768-1279px) | Bento simplificado, 2 colunas com alguns spans | | Dispositivos móveis (abaixo de 768px) | Coluna única, reordenada por prioridade de conteúdo |

O teste: com 390px, cada célula deve ter altura suficiente para que o conteúdo dentro dela seja legível sem zoom ou rolagem horizontal. Caso contrário, o problema está na célula, não na viewport.

Se você quiser mais exemplos de layout, navegue pelo restante do ⟦MARCA0⟧ Documentos. Se você precisa de um página de destino que impeça a perda de visitantes para uma parede de linhas de recursos, contratar ⟦MARCA0⟧ e nós entregamos layouts reais, textos reais e conversão real.

Quando uma grade Bento não é a escolha certa

Bento não é uma solução universal. Se usado incorretamente, você forçará o conteúdo em células que precisam de espaço.

Bento falha quando:

• Seu conteúdo é sequencial. Um tutorial passo a passo, um fluxo de integração, um estudo de caso narrativo. Esses elementos precisam de ordem linear. O formato Bento remove a ordem de leitura.

• Cada elemento tem o mesmo peso. Se você realmente tem três recursos iguais, uma linha de três colunas ainda é adequada. O formato Bento exige hierarquia interna. Aplanar o conteúdo em células Bento faz com que elementos iguais pareçam classificados aleatoriamente.

• Cada célula precisa de profundidade. Se o seu recurso precisa de 200 palavras para ser explicado, ele não cabe em uma célula Bento. Escreva-o como uma seção, não como um compartimento.

• Você não tem recursos visuais fortes. As grades Bento são mais legíveis quando as células contêm elementos visuais (gráficos, fotos do produto, ilustrações). Bentos compostos apenas por texto parecem layouts de jornal apertados.

Tabela de decisão:

| Seu conteúdo é... | Usar |

|--------------------|-----|

| Uma plataforma com peso desigual entre os recursos | Grade Bento | | Três recursos iguais e paralelos | Linha de três colunas | | Uma explicação narrativa | Pilha de recursos (linhas de largura total) | | Um fluxo passo a passo | Seções numeradas |

| Página de provas no estilo dashboard | Grade Bento |

| Análise detalhada de um recurso | Seções principal e de apoio |

Modelo inicial do designer

Use este modelo como base. Edite a partir daqui, não crie do zero.

Estrutura da seção:

1. Título em largura total acima da grade (uma linha, impactante)
2. Grade de 4 colunas, 3 a 5 linhas no total
3. Uma célula principal (2x2), visualmente o elemento mais forte
4. Quatro a seis células de apoio, com tipos de conteúdo variados
5. Célula de fechamento opcional em largura total para CTA ou prova

Regras de conteúdo da célula:

• Uma frase por célula, no máximo. Se precisar de um parágrafo, a célula é muito pequena.

• Um elemento por célula (gráfico, ilustração, captura de tela, métrica, depoimento, logotipo).

• Espaçamento interno consistente (geralmente 24-32px).

• Raio de canto consistente (geralmente 12-16px).

• Uso moderado de cores. A maioria das células compartilha um fundo. Uma ou duas podem inverter ou usar destaque.

Ordem para dispositivos móveis: primeiro a célula principal, depois as três células de apoio mais importantes e, por fim, o restante.

Inclua uma seção Bento em sua próxima landing page. Você sentirá a diferença.

Perguntas Frequentes

O grid Bento é apenas uma tendência passageira?

Não. Tendências duram de um a dois anos. Os grids Bento têm dominado as principais páginas de produtos desde 2022 e continuam sendo. Eles são um padrão de layout para um problema específico de comunicação, e esse problema não vai desaparecer.

Posso usar um grid Bento em um blog ou site de conteúdo?

Raramente. O Bento é para superfícies de produtos e marketing. Postagens de blog são sequenciais. Um hub de artigos ou um grid de conteúdo em destaque podem usar células desiguais no estilo Bento, mas o conteúdo completo do artigo não deve ser usado.

Qual é a diferença entre grid Bento e Masonry?

O Masonry é algorítmico. As células são posicionadas automaticamente com base na altura do conteúdo. O Bento é composicional. As células são posicionadas intencionalmente pelo designer com base na importância. O layout em mosaico funciona para o Pinterest. O layout Bento funciona para produtos.

Grades Bento funcionam para dashboards?

Sim, quando o dashboard tem pesos desiguais de widgets. Uma métrica principal, várias métricas secundárias, um gráfico, um registro, um feed de atividades recentes. Este é exatamente o formato Bento. Veja: a visualização do projeto da Linear, o dashboard de implantação da Vercel.

Quantas células uma grade Bento deve ter?

Entre quatro e oito. Menos de quatro e deixa de parecer uma grade. Mais de oito e começa a parecer uma parede. Sete é um número ideal comum.

Pare de criar linhas de recursos

Analise qualquer site SaaS criado nos últimos três anos. Conte as linhas de recursos de três colunas que você vê. Conte as seções Bento. Os números se invertem a cada ano.

Há um motivo. A linha de recursos era um layout para uma história que paramos de contar: a história dos "três recursos iguais". Produtos modernos não têm três recursos iguais. Eles têm uma plataforma, um recurso principal, um conjunto de recursos de apoio, uma prova de conceito e uma chamada para ação (CTA) final. Esse formato se encaixa em um bento. Não se encaixa em uma linha.

Escolha uma página do seu site atual que ainda tenha uma linha de recursos. Redesenhe essa seção como uma grade bento. Coloque o recurso mais forte na célula principal. Coloque a prova de conceito em uma célula de apoio. Coloque o diferencial de uma linha em outra. Publique.

Observe o tempo de permanência aumentar. Observe a taxa de rejeição diminuir. Observe a página realmente funcionar.

Pare de criar linhas de recursos.