Bento Grid Design: El Manual de Layouts de UI para 2026

La fila de tres columnas con features está muerta. Lleva dos años muerta y la mayoría de los diseñadores todavía no han movido el cadáver.

Ya sabes cuál. Tres columnas iguales, cada una con un ícono, un título, un párrafo, apiladas en móvil. Todos los sitios SaaS construidos entre 2018 y 2023 tenían una. Vendía la idea de que tu producto tenía tres features distintas, más o menos iguales en peso, cada una con exactamente el 33% de la atención del lector.

Eso nunca fue verdad. Las features nunca son iguales. La atención nunca es igual. Y los lectores dejaron de leer esas secciones más o menos cuando TikTok les enseñó que la densidad de información es una feature, no un bug.

El bento grid ganó porque admite lo que la fila de features nunca admitió: algunas cosas son más importantes que otras, y el lector debería saberlo de un vistazo.

Qué es realmente un bento grid

Un bento grid es un patrón de layout donde una sección se divide en celdas rectangulares desiguales, cada una con un contenido distinto, organizadas para que el grid completo funcione como una composición unificada.

El nombre viene de la caja bento japonesa. Compartimentos de distintos tamaños, cada uno con algo diferente, organizados para estar visualmente equilibrados como conjunto. No una fila de columnas idénticas. No una pila de secciones narrativas. Una composición única con jerarquía interna deliberada.

El patrón tiene tres características esenciales. Primera, celdas desiguales, generalmente construidas sobre un grid de 3 o 4 columnas donde algunas celdas abarcan varias columnas o filas. Segunda, contenido variado por celda (un gráfico en una, una ilustración en otra, una métrica en la tercera, un testimonio en la cuarta). Tercera, coherencia visual en todo el conjunto, generalmente a través de un tratamiento de fondo compartido, border radii consistentes y uso de color comedido.

Lo que no es: una demo de CSS Grid. Un layout de masonry. Un feed de Pinterest. Una disposición aleatoria de tarjetas. Bento es compositivo, no algorítmico.

Un bento grid es compresión. Una fila de features es narración. La mayoría de los productos necesitan compresión.

Por qué reemplazó a la fila de features

Tres razones. Dos obvias. Una es la razón por la que el patrón se quedó.

Razón uno: tiempo de permanencia. Las pruebas internas de Apple en páginas de marketing mostraron que las secciones bento retienen a los visitantes aproximadamente un 47% más que las filas de features equivalentes. La razón no es ningún misterio: un lector puede explorar un bento grid a su ritmo. No hay un orden de lectura obligatorio. Llegan, eligen la celda que les interesa y se quedan.

Razón dos: densidad sin muros de texto. Un bento grid bien diseñado comunica seis u ocho cosas en el espacio que un layout tradicional usaría para tres. Como las celdas albergan distintos tipos de contenido (visual, estadística, copy, testimonio), el lector no percibe la densidad como pesada.

Razón tres (la real): encaja con cómo se venden realmente los productos modernos. La mayoría de los productos SaaS en 2026 no son tres features. Son una plataforma con una capacidad principal, tres a cinco capacidades de soporte, una historia de integración, un punto de prueba y quizás una feature específica que vale la pena destacar por separado. Esa forma no encaja en una fila de tres columnas. Encaja en un bento. El layout encontró al contenido donde estaba.

Las tres mejores implementaciones reales ahora mismo

Apple (apple.com/mac). La referencia. Todas las páginas de producto Mac desde finales de 2022 usan bento. Las secciones del chip de la serie M son el ejemplo más limpio: una celda grande para el visual del chip, celdas más pequeñas para benchmarks y casos de uso. Fondo oscuro compartido, corner radius compartido, padding interno consistente. Cada celda se gana su lugar. Fíjate en lo que nunca hacen: no fuerzan que todas las celdas tengan el mismo peso. El visual del chip siempre es visualmente dominante.

Linear (linear.app/features). Bento para herramientas de desarrollo. Cada sección de features es un bento de 4 columnas donde la capacidad principal (como el seguimiento de issues) ocupa una celda 2x2 y las features menores tienen celdas 1x1 o 1x2. La versión de Linear es famosa por su contención: capturas de producto puras, cero ilustración de stock, etiquetas monospace en las celdas. Se lee como una hoja de especificaciones, a propósito.

Vercel (vercel.com). El bento de la homepage de Vercel es la versión híbrida. Algunas celdas son ilustraciones, otras son capturas de producto, otras son texto puro. Demuestran que puedes mezclar medios dentro de un solo bento sin que resulte inconsistente, siempre que cada celda comparta el mismo lenguaje visual (mismo fondo, mismo radius, mismo ritmo de espaciado interior).

Tres industrias diferentes, tres tonos diferentes, el mismo patrón de base. El patrón no es moda. Es un layout para un problema de comunicación específico: "hacemos muchas cosas, aquí las tienes de un vistazo, elige la que te importa."

La matemática del grid (más simple de lo que parece)

La mayoría de los bento grids usan una de dos estructuras base.

El bento de 3 columnas. Ideal para secciones compactas, testimonios y destacados de features. Patrón típico:

• Una celda hero 2x1 (abarca 2 columnas, 1 fila)
• Una celda 1x1 (1 columna, 1 fila)
• Dos celdas 1x1 en una segunda fila
• Una celda 1x2 para algo que se beneficia del peso vertical

El bento de 4 columnas. Mejor para secciones completas con más amplitud. Patrón típico:

• Una celda hero 2x2
• Dos celdas 1x1 apiladas junto a ella
• Una celda 2x1 en la parte inferior
• Una celda 1x1 para cerrar la fila

Puedes construir un bento grid en CSS Grid en unas veinte líneas:

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

Aplica las clases a los elementos hijos y el grid se organiza solo. La matemática es así de simple. Lo que hace difícil el bento no es el grid. Son las decisiones editoriales sobre qué celdas merecen peso.

Reglas responsive que no se derrumban

El bento de escritorio es fácil. El bento mobile es donde fallan la mayoría de las implementaciones.

El error: mantener la forma del grid y escalar todo hacia abajo. A 390px de ancho, un bento de 4 columnas se convierte en cuatro columnas de 90px, lo que es inútil. Las celdas no pueden albergar contenido real.

La regla: re-flujo, no reducción. En móvil, el bento grid colapsa a una sola columna, pero el orden de las celdas cambia para preservar la jerarquía.

• La celda hero sube al principio (mayor impacto visual primero en móvil)
• Las celdas anchas 2x1 se convierten en celdas de una columna a ancho completo
• Las celdas altas 1x2 se convierten en celdas de altura estándar, sin estirarse verticalmente
• El orden se redefine por importancia, no por posición visual en escritorio

CSS Grid hace esto sin dolor con grid-template-areas y media queries. O en Tailwind: usa los prefijos lg: para aplicar los spans del bento solo en pantallas grandes y deja que el stack mobile por defecto se gestione solo.

La prueba: a 390px, cada celda debe ser lo suficientemente alta como para que el contenido interior sea legible sin hacer zoom ni scroll horizontal. Si no lo es, el problema está en la celda, no en el viewport.

Si quieres más análisis de layouts, explora el resto de Brainy Papers. Si necesitas una landing page que deje de perder visitantes ante un muro de filas de features, contrata a Brainy y enviamos layouts reales, copy real, conversión real.

Cuándo el bento grid es la decisión equivocada

Bento no es una solución universal. Úsalo mal y forzarás contenido en celdas que necesitaban respirar.

Bento falla cuando:

• Tu contenido es secuencial. Un tutorial paso a paso, un flujo de onboarding, un caso de estudio narrativo. Estos necesitan orden lineal. Bento elimina el orden de lectura.
• Todo tiene el mismo peso. Si genuinamente tienes tres features iguales, una fila de tres columnas sigue siendo correcta. Bento requiere jerarquía interna. Aplanar en celdas bento hace que cosas iguales parezcan ordenadas aleatoriamente.
• Cada celda necesita profundidad. Si tu feature necesita 200 palabras para explicarse, no cabe en una celda bento. Escríbela como una sección, no como un compartimento.
• No tienes activos visuales potentes. Los bento grids funcionan mejor cuando las celdas contienen visuales (gráficos, capturas de producto, ilustraciones). Los bentos todo-texto parecen layouts de periódico apretujados.

Tabla de decisión:

El patrón de inicio para diseñadores

Usa esto como base. Edita desde aquí, no construyas desde cero.

Estructura de la sección:

1. Titular a ancho completo encima del grid (una línea, contundente)
2. Grid de 4 columnas, 3 a 5 filas en total
3. Una celda hero (2x2), el activo visualmente más potente
4. Cuatro a seis celdas de soporte, tipos de contenido variados
5. Celda de cierre a ancho completo opcional para CTA o prueba

Reglas de contenido de celda:

• Una frase por celda, máximo. Si necesitas un párrafo, la celda es demasiado pequeña.
• Un activo por celda (gráfico, ilustración, captura, métrica, testimonio, logo).
• Padding interior consistente (generalmente 24-32px).
• Corner radius consistente (generalmente 12-16px).
• Uso de color comedido. La mayoría de las celdas comparten fondo. Una o dos pueden invertirse o usar color de acento.

Orden móvil: celda hero primero, luego las tres celdas de soporte más importantes, luego el resto.

Publica una sección bento en tu próxima landing page. Notarás la diferencia.

Preguntas frecuentes

¿El bento grid es solo una tendencia?

No. Las tendencias duran uno o dos años. Los bento grids llevan siendo dominantes en las principales páginas de producto desde 2022 y siguen ahí. Son un patrón de layout para un problema de comunicación específico, y ese problema no va a desaparecer.

¿Puedo usar un bento grid en un blog o sitio de contenido?

Raramente. Bento es para superficies de producto y marketing. Los posts de blog son secuenciales. Un hub de artículos o un grid de contenido destacado puede usar celdas desiguales al estilo bento, pero el cuerpo completo de un artículo no debería.

¿Cuál es la diferencia entre bento grid y masonry?

Masonry es algorítmico. Las celdas se colocan automáticamente según la altura del contenido. Bento es compositivo. Las celdas las coloca intencionalmente el diseñador según la importancia. Masonry funciona para Pinterest. Bento funciona para productos.

¿Los bento grids funcionan para dashboards?

Sí, cuando el dashboard tiene widgets de peso desigual. Una métrica primaria, varias métricas secundarias, un gráfico, un log, un feed de actividad reciente. Esta es exactamente la forma del bento. Ver: la vista de proyectos de Linear, el dashboard de deployments de Vercel.

¿Cuántas celdas debe tener un bento grid?

Entre cuatro y ocho. Menos de cuatro y deja de leerse como un grid. Más de ocho y empieza a leerse como un muro. Siete es el punto dulce más común.

Deja de construir filas de features

Recorre cualquier sitio SaaS construido en los últimos tres años. Cuenta las filas de features de tres columnas que veas. Cuenta las secciones bento. Los números se invierten cada año.

Hay una razón. La fila de features era un layout para una historia que dejamos de contar: la historia de las "tres features iguales". Los productos modernos no tienen tres features iguales. Tienen una plataforma, una capacidad principal, un conjunto de capacidades de soporte, un punto de prueba y un CTA de cierre. Esa forma encaja en un bento. No encaja en una fila.

Elige una página de tu sitio actual que todavía tenga una fila de features. Rediseña esa sección como un bento grid. Pon la capacidad más potente en la celda hero. Pon la prueba en una celda de soporte. Pon el diferenciador de una línea en otra. Publícalo.

Observa cómo sube el tiempo de permanencia. Observa cómo baja el rebote. Observa cómo la página hace su trabajo.

Deja de construir filas de features.