Design de grade Bento: um guia para 2026 sobre layouts, espaçamento e quando não usá-los.

Uma grade Bento é uma seção composta por células de tamanhos diferentes, cada uma contendo um conteúdo independente, organizadas de forma que o tamanho das células classifique o que é importante. A célula se torna a unidade de significado, e o olhar percebe a importância pelo tamanho antes mesmo de ler uma palavra.

A maioria das grades Bento na web em 2026 são decorativas. As células têm o mesmo tamanho, o conteúdo foi adaptado para caber nelas e o layout se assemelha a um mural de cartões. As boas grades são o oposto. Os tamanhos das células são definidos pelo conteúdo, os espaçamentos e o preenchimento mantêm o ritmo, e o recurso de recolhimento responsivo permanece legível mesmo em dispositivos móveis. Este guia aborda anatomia, lógica de dimensionamento, espaçamento, adequação ao conteúdo, responsividade, sete desmontagens (Apple, Linear, Vercel, Stripe, Arc, Apple Vision Pro, Figma) e os casos em que o design Bento prejudica a página.

Design de grade Bento: a definição prática

Um grade bento é uma composição deliberada onde cada célula contém um conteúdo independente e o tamanho da célula é determinado pelo que está dentro dela.

Três propriedades o diferenciam de uma grade de cartões. As células são dimensionadas em proporções deliberadas. As células contêm diferentes tipos de conteúdo, não o mesmo modelo repetido. O layout é percebido como uma única composição. Remova qualquer uma dessas três propriedades e você terá uma parede de cartões.

O padrão se popularizou porque resolveu um problema real. A linha de destaque, com três ou quatro colunas de cartões idênticos contendo ícone, título e parágrafo, havia se tornado o layout mais básico da web em 2023. O Bento ofereceu aos designers uma maneira de apresentar múltiplos recursos sem que a própria seção parecesse um modelo genérico.

A anatomia de uma grade Bento

Todo layout Bento é construído a partir de quatro partes: a célula âncora, as células de suporte, o espaçamento entre elas e a margem circundante. Se qualquer uma delas estiver incorreta, a grade desmorona.

A célula âncora é a maior, geralmente posicionada à esquerda ou no canto superior esquerdo, e contém o conteúdo mais importante. Ela é a primeira a ser vista e emoldura o restante. Um Bento sem uma âncora clara se apresenta como uma linha de cartões plana. As células de suporte preenchem a composição com conteúdo secundário e priorizam a âncora na primeira leitura. O espaçamento entre elas é estrutural, indicando visualmente que essas são células separadas de uma mesma composição. A margem circundante é a caixa delimitadora que permite que a seção seja lida como uma unidade discreta.

A âncora define a ordem. As células de suporte complementam os detalhes. O ritmo da margem separa as unidades sem quebrar a composição. A margem ao redor emoldura o todo.

O dimensionamento das células é orientado pelo conteúdo, não pela decoração

O maior erro que as equipes cometem é dimensionar as células para preencher a tela em vez de dimensioná-las para acomodar o conteúdo.

Uma célula com um único número e uma legenda de uma linha não precisa ter o mesmo tamanho que uma com uma captura de tela e três frases. Se forem forçadas a ter o mesmo tamanho, uma parecerá vazia enquanto a outra parecerá apertada. A grade está decorando, não comunicando.

Inverta a ordem. Decida qual conteúdo pertence à seção, escolha o elemento âncora, escolha os elementos secundários e, em seguida, dimensione cada célula para que o conteúdo caiba com o espaço adequado, sem excessos. Cada célula deve ter aproximadamente de 20% a 30% de espaço em branco interno. Menos que isso e a sensação é de sobrecarga. Mais que isso e a sensação é de vazio.

As grades mais limpas usam proporções. O elemento âncora tem aproximadamente o dobro da área da maior célula de suporte. Essa proporção espelha o hierarquia visual usado no restante da página, comprimido na seção.

A célula âncora conduz a leitura

Todo bento tem uma âncora, e a maioria das grades fracas não se compromete com uma. A âncora vence em tamanho por uma margem clara, idealmente o dobro da área da próxima célula, e vence em densidade de conteúdo. A âncora é onde reside o texto mais forte, o visual mais importante ou a interação de maior impacto. Se a âncora for uma ilustração genérica enquanto uma célula de apoio contém o título propriamente dito, o caminho de leitura é interrompido.

A página de produto para Mac da Apple ancora com uma fotografia concisa do produto e um título em negrito. A Linear faz o inverso na página de recursos, com uma âncora repleta de texto, um título conciso e um fragmento de interface do usuário, com células de apoio mais esparsas. Mesmo princípio, formato de conteúdo diferente.

O problema: duas âncoras. Os designers dividem em um painel esquerdo e um painel direito de área igual e chamam isso de bento. Isso é um herói de duas colunas. No momento em que a seção tem duas reivindicações iguais para primeira leitura, o Bento para de funcionar.

Regras de espaçamento que impedem o colapso da grade

As grades Bento falham no espaçamento com mais frequência do que no dimensionamento, porque a margem interna e o preenchimento interno são duas funções diferentes e a maioria das equipes as trata como uma só.

A margem interna indica ao olhar onde uma célula termina e a próxima começa. Muito estreita, um bloco. Muito generosa, desconectada. Use uma margem interna de aproximadamente metade do preenchimento interno. O preenchimento interno indica ao olhar quanto espaço o conteúdo tem para respirar. A margem ao redor é a terceira dimensão, um espaço vertical de pelo menos 1,5 vezes o valor da margem interna para que a seção seja lida como uma unidade discreta.

Um erro comum. As equipes usam o mesmo valor para os três. A grade perde o ritmo. Diferenciar os três, mesmo que ligeiramente, restaura o ritmo.

Regras de adequação do conteúdo: o que realmente pertence a uma célula

Uma célula Bento é tão boa quanto a unidade de conteúdo que ela contém. A maioria das células falha porque o conteúdo foi forçado para dentro da célula em vez de a célula ser moldada em torno do conteúdo.

Uma célula Bento é um contêiner para uma única ideia. Uma afirmação, uma funcionalidade, um número, uma captura de tela, um depoimento. Bom conteúdo: uma única funcionalidade com um título de uma linha e uma prévia da interface do usuário, uma única métrica com legenda, um único depoimento com atribuição. Conteúdo ruim: um parágrafo longo, uma comparação entre colunas, um processo com várias etapas, uma tabela de preços com linhas alinhadas.

A regra de decisão. Se o conteúdo dentro da célula pudesse ser extraído e inserido em um parágrafo em qualquer outro lugar sem perder o sentido, a célula está cumprindo sua função. Se precisar de contexto ao redor, o Bento está fragmentando o conteúdo.

Comportamento responsivo, o verdadeiro teste

Um Bento que fica ótimo em 1440 pixels e quebra em 768 pixels é um pôster para desktop, não um layout, e o colapso responsivo é onde a maioria das grades de produção falha silenciosamente.

O desafio é que as células não são uniformes. Uma linha de funcionalidades se recolhe perfeitamente. Um design Bento precisa decidir o que fazer com células de diferentes larguras e alturas. Se as regras estiverem erradas, a versão para dispositivos móveis fica parecendo um amontoado de caixas desalinhadas.

A estratégia: Defina primeiro o design para desktop. Em tablets (768 a 1024 pixels), reduza o conteúdo para duas colunas, com a âncora abrangendo ambas. Em dispositivos móveis (abaixo de 768 pixels), use uma única coluna, com cada célula ocupando toda a largura e empilhadas, âncora primeiro e células de suporte em ordem de prioridade. Ajuste o espaçamento interno e o espaçamento entre as células em cada ponto de quebra para que as células pareçam proporcionais, e não apenas reduzidas.

O erro a evitar: células com conteúdo que não se adapta a mudanças de largura. Um infográfico horizontal em uma célula de desktop fica ilegível em uma coluna de dispositivo móvel. Planeje o conteúdo para ambos os formatos, não apenas para um.

Sete páginas de produtos reais, com anotações

A estrutura só importa se sobreviver ao contato com as páginas publicadas. Sete implementações de Bento em produção no momento. Nenhuma é perfeita. Todas estão acima do padrão mínimo de uma landing page SaaS.

Apple, Bento como teatro de produto

As páginas de produto da Apple usam o Bento como um teatro guiado pela rolagem. As células âncora são enormes, frequentemente exibindo uma única fotografia do produto em escala quase total da tela, com proporções três ou quatro vezes maiores que as das células de suporte. Espaçamento generoso. Cada célula contém um recurso, nunca dois. O visitante sai da página após lê-la na ordem desejada pela Apple. A falha: revelações com muito movimento podem degradar em conexões lentas e achatar a classificação.

Linear, Bento como densidade para desenvolvedores

Linear apresenta uma das grades Bento mais densas da web e a mantém legível por meio de uma tipografia implacável e uma âncora que sempre se destaca. Âncora à esquerda com o dobro da área da maior célula de suporte, duas colunas de três células menores à direita, espaçamento entre colunas estreito e espaçamento interno maior. Cada célula contém um recurso com um título conciso e um fragmento de interface do usuário. O sistema tipográfico carrega a hierarquia. Uma tipografia mais fraca comprometeria o padrão.

⟦MARCA6⟧, bento como coreografia de movimento

⟦MARCA7⟧ usa o bento como palco para o movimento. Cada célula recompensa a rolagem com uma pequena revelação, e a grade conta uma história de construção e entrega. Uma âncora clara em 1,5x com quatro a seis células de apoio. Juntas, elas constroem uma narrativa sobre o fluxo de trabalho do desenvolvedor. A falha: o movimento pode impactar usuários com preferências de movimento reduzido de forma mais intensa do que o necessário.

⟦MARCA14⟧, bento como contenção

As seções bento de ⟦MARCA15⟧ são as mais discretas da lista, e é exatamente por isso que funcionam para um público que desconfia de designs chamativos. Âncora mais duas ou três células de apoio. Proporções claras, mas não dramáticas. Espaçamento editorial. Cada célula contém uma afirmação com um exemplo de código conciso ou uma única ilustração. O padrão transmite confiança sem ornamentos.

Quer um bento que comprima a página em vez de decorá-la? Contrate ⟦MARCA0⟧. O UXBrainy oferece design de página de destino layouts bento projetados célula por célula. O AppBrainy oferece interfaces de usuário de produtos com a mesma disciplina.

Arc, bento como personalidade

Arc usa o bento como veículo para a personalidade da marca. As células mudam de forma, cor e movimento para expressar a ludicidade do produto. Cantos arredondados, gradientes, alturas variadas, proporções flexíveis. Arc quebra as regras e funciona porque a marca conquistou permissão por meio do posicionamento, o mesmo instinto por trás de um bom design web brutalista: permissão conquistada, não emprestada.

Apple Vision Pro, bento como pré-visualização espacial

O Vision Pro é o bento mais ambicioso da web porque precisa sugerir um produto tridimensional por meio de células bidimensionais. As células âncora usam vídeo para sugerir profundidade espacial. Proporções dramáticas, espaçamento cinematográfico. O conteúdo do vídeo realiza o trabalho espacial e o dimensionamento da célula enquadra cada momento. Este é o argumento mais forte de que o conteúdo certo pode elevar o layout além do que o formato da célula por si só consegue fazer.

⟦MARCA1⟧, bento como densidade de recursos

⟦MARCA2⟧ lida com mais recursos paralelos do que qualquer concorrente e sobrevive à densidade porque o sistema tipográfico e o ritmo da célula suportam a carga. Seis ou sete células por seção, uma âncora clara, proporções comprimidas, espaçamento estreito, preenchimento interno generoso. Cada célula contém um recurso com um fragmento de interface do usuário e uma legenda concisa. O sistema tipográfico da ⟦MARCA3⟧ é forte o suficiente para manter a classificação em muitas células pequenas. Um sistema tipográfico mais fraco perderia a classificação à medida que o número de células aumentasse.

Quando não usar uma grade Bento

O layout Bento é inadequado para qualquer conteúdo que precise ser lido em ordem, comparado em detalhes ou analisado rapidamente para uma única decisão. A maioria das páginas o utiliza sem verificar.

Casos em que o Bento prejudica a página:

• Conteúdo editorial extenso. O Bento fragmenta o fluxo de leitura.

• Conteúdo comparativo. Tabelas de preços, comparações de recursos, listas de antes e depois. As células não estão alinhadas para leitura simultânea entre elas.

• Processos passo a passo. Um guia prático precisa de uma ordem clara. As células Bento sugerem ideias paralelas, não etapas.

• Páginas com uma única decisão. Se a página existe para direcionar o visitante a uma chamada para ação (CTA), o Bento divide o foco entre as células.

• Páginas com pouco conteúdo. Com apenas uma ou duas ideias, um único painel principal é mais eficaz do que um Bento com células de apoio vazias.

O Bento é indicado para ideias paralelas de registro semelhante que o visitante pode analisar em qualquer ordem. Evite-o em páginas de sequência, comparação, decisão ou com uma única afirmação.

Um checklist de adequação do Bento antes de publicar

Execute este checklist antes de enviar um layout para o Bento:

1. Confirmação de âncora. Uma célula é claramente maior que a seguinte, com pelo menos 1,5 vezes o tamanho?

2. Ajuste do conteúdo da célula. Cada célula pode funcionar sozinha como um contêiner para uma única ideia?

3. Dependência sequencial. O visitante precisa ler as células em ordem? Se sim, o Bento está incorreto.

4. Comparação entre células. As células precisam ser comparadas linha por linha? Se sim, use uma tabela.

5. Proporção de preenchimento interno. O preenchimento interno é aproximadamente o dobro da margem interna?

6. Margem externa. Há pelo menos 1,5 vezes a margem interna como espaço livre acima e abaixo?

7. Plano responsivo. Cada célula tem um formato planejado para desktop, tablet e celular?

8. Âncora em dispositivos móveis. A âncora permanece fixa (primeira célula, largura total)?

9. Densidade de conteúdo. Há aproximadamente 20 a 30% de espaço em branco interno por célula? 10. Número de seções. Mais de três seções bento na página? A página está se tornando uma galeria bento.

Uma página que passa por essas dez verificações tem uma seção bento que justifica seu layout.

Perguntas frequentes

O que é uma grade bento no design web?

Uma grade bento é uma seção composta por células de tamanhos diferentes, cada uma contendo um conteúdo independente, com os tamanhos das células classificando o que é importante. O nome vem da caixa bento japonesa, que compartimenta diferentes alimentos de tamanhos diferentes em uma bandeja. É usada com mais frequência para seções de recursos de produtos, resumos de funcionalidades e murais de depoimentos.

Quando usar uma grade bento?

Use uma quando você tiver várias ideias paralelas com registro semelhante que o visitante pode analisar em qualquer ordem. Funciona bem para recursos de produtos, resumos de funcionalidades e murais de depoimentos. Evite usá-la para leitura sequencial, comparação entre células, processos passo a passo e páginas com apenas uma ou duas ideias.

Como dimensionar células em uma grade Bento?

Dimensione a partir do conteúdo para dentro. Selecione a âncora, selecione os elementos secundários e, em seguida, dimensione cada célula para que o conteúdo caiba com aproximadamente 20 a 30% de espaço em branco interno. A âncora deve ter pelo menos o dobro da área da maior célula de suporte.

Qual é o espaçamento ideal entre as células em uma grade Bento?

Use um espaçamento entre células de aproximadamente metade do preenchimento interno. Se as células tiverem 32 pixels de preenchimento, use 16 pixels de espaçamento entre células. A proporção é mais importante do que o valor absoluto.

Como uma grade Bento se comporta em dispositivos móveis?

Ela se reduz a duas colunas em tablets e a uma única coluna em dispositivos móveis, com a âncora primeiro e as células de suporte reordenadas por prioridade. Os valores de preenchimento interno e entre as células são ajustados em cada ponto de quebra para que as células pareçam proporcionais. Células com conteúdo que não suporta uma mudança de largura devem ser redesenhadas para o formato de dispositivos móveis.

Qual é a diferença entre uma grade Bento e uma grade de cartões?

Uma grade de cartões é uniforme, com cada cartão do mesmo tamanho e tipo de conteúdo. Um layout Bento é uma composição deliberada onde as células têm tamanhos em proporções diferentes e contêm tipos de conteúdo distintos. O Bento implica hierarquia através do tamanho, enquanto uma grade de cartões implica paralelismo através da uniformidade.

O padrão por trás das grades Bento que se mantêm relevantes

Uma grade Bento que sobrevive até 2026 não é uma grade repleta de células engenhosas. É uma grade onde cada célula é uma compressão deliberada de uma única ideia.

As marcas que se mantêm relevantes, Apple, Linear, Stripe, Figma, compartilham uma disciplina. As células são pequenas apenas quando o conteúdo justifica o tamanho reduzido. As células são grandes apenas quando o conteúdo justifica o tamanho reduzido. O espaçamento entre as células é consistente, o preenchimento interno é consistente e o recolhimento responsivo é planejado. Nada é acidental, porque o padrão Bento pune os erros com mais rigor do que qualquer outro layout na web.

As marcas que envelheceram mal trataram o padrão como um estilo visual. Primeiro escolheram os formatos das células e depois perguntaram qual conteúdo se encaixaria. As células acabam contendo conteúdo para o qual não foram projetadas e os fragmentos responsivos colapsam em dispositivos móveis. Essas grades são silenciosamente redesenhadas seção por seção ao longo do ano seguinte.

A disciplina é começar pelo conteúdo. Decida o que a seção precisa comunicar, escolha a âncora, escolha os paralelos e, em seguida, dimensione as células com base nessas decisões. Trate-o como um dos seus princípios de design web principais, da mesma forma que você trata a hierarquia e a tipografia, e as seções Bento que você lançar ainda terão a aparência correta no ano que vem.

Se você quiser um Bento que comprima a página em vez de decorá-la, contratar ⟦MARCA0⟧. A UXBrainy lança sites de marketing e landing pages com layouts Bento projetados célula por célula. A AppBrainy lança interfaces de usuário de produtos com a mesma disciplina.