Diseño con Bento Grid: El Manual de Layouts UI para 2026
Qué es realmente un bento grid, cuándo funciona y cuándo no, análisis de las implementaciones de Apple, Linear y Vercel, y una base de CSS Grid para empezar.
La fila de características de tres columnas 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 es. Tres columnas iguales, cada una con un ícono, un título y un párrafo, apiladas en móvil. Todos los sitios SaaS construidos entre 2018 y 2023 tenían una. Vendía una sola mentira: que tu producto eran tres funciones, cada una mereciendo exactamente el 33% de la atención. La atención nunca ha sido equitativa, y los lectores dejaron de leer esas secciones el mismo año en que TikTok les enseñó que la densidad es la función, no el error.
El bento grid ganó porque admite lo que la fila de características nunca admitió: algunas cosas son más importantes que otras, y el lector debería saberlo de un vistazo. Para el patrón más profundo detrás de esto, consulta jerarquía visual. Las páginas Mac de Apple son el ejemplo en vivo más limpio de cómo se ve eso en producción.
Qué es realmente un bento grid
Un bento grid es un patrón de diseño donde una sección se divide en celdas rectangulares de distintos tamaños, cada una con un contenido diferente, organizadas de modo que el conjunto se lea como una composición unificada.
El nombre viene de la fiambrera japonesa. Compartimentos de distintos tamaños, cada uno con algo diferente, dispuestos para que el todo esté visualmente equilibrado. 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 una cuadrícula de 3 o 4 columnas con algunas celdas abarcando múltiples columnas o filas. Segunda, contenido variado por celda (un gráfico en una, una ilustración en otra, una métrica en una tercera, un testimonio en una cuarta). Tercera, coherencia visual en el conjunto, normalmente a través de un tratamiento de fondo compartido, radios de borde consistentes y un uso de color contenido.
Lo que no es: una demo de CSS Grid. Un diseño masonry. Un feed de Pinterest. Un arreglo aleatorio de tarjetas. El bento es composicional, no algorítmico.
Un bento grid es compresión. Una fila de características es narración. La mayoría de los productos necesitan compresión.
Por qué reemplazó a la fila de características
Tres razones. Dos de ellas obvias. Una de ellas es la razón por la que el patrón se asentó.
Razón uno: tiempo de permanencia. Las pruebas internas de Apple en páginas de marketing mostraron que las secciones bento retenían a los visitantes aproximadamente un 47% más que filas de características equivalentes. La razón no es un misterio: un lector puede hojear un bento grid. No hay un orden de lectura obligatorio. Aterrizan, escogen 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 diseño tradicional usaría para tres. Porque las celdas contienen distintos tipos de contenido (visual, estadístico, copy, testimonio), el lector no experimenta la densidad como algo pesado.
Razón tres (la real): se corresponde con cómo se venden realmente los productos modernos. La mayoría de los productos SaaS en 2026 no son tres funciones. Son una plataforma con una capacidad principal, tres a cinco capacidades de apoyo, una historia de integración, un punto de prueba y quizás una función específica que vale la pena destacar por separado. Esa forma no encaja en una fila de tres columnas. Encaja en un bento. El diseño encontró al contenido donde estaba.
| Patrón | Encaja con este relato | Falla con este relato |
|---|---|---|
| Fila de características de tres columnas | Tres funciones iguales, producto narrativo | Plataformas con peso de funciones desigual |
| Pila de funciones (filas de ancho completo) | Explicaciones profundas de funciones | Necesidad de mostrar amplitud de un vistazo |
| Bento grid | Plataformas, suites, dashboards, páginas de prueba | Tutoriales lineales, flujos paso a paso |
Las tres mejores implementaciones reales ahora mismo
Apple (apple.com/mac). Ya mostrado arriba. Todas las páginas de productos Mac desde finales de 2022 en adelante usan bento. Las secciones del chip de la serie M son el patrón más limpio: una celda dominante para el visual del chip, celdas más pequeñas para benchmarks y casos de uso. Fondo oscuro compartido, radio de esquina compartido, padding interno consistente. El chip siempre domina visualmente. Esa es la decisión editorial, no la cuadrícula.
Linear (linear.app/features). Bento para herramientas de desarrollo. La página de funciones es una pila de bentos de 4 columnas donde la capacidad principal (seguimiento de issues, planificación, construcción) ocupa una celda 2x2 y las funciones menores tienen 1x1 o 1x2. La versión de Linear es famosa por su contención: solo capturas de pantalla del producto, sin ilustraciones de stock, etiquetas en monospace. Se lee como una especificación técnica, a propósito.
Vercel (vercel.com). El bento de la página principal de Vercel es la versión híbrida. Algunas celdas son ilustraciones, otras son capturas de pantalla del producto, otras son texto puro. Demuestran que puedes mezclar medios dentro de un único bento sin que resulte inconsistente, siempre que cada celda comparta el mismo lenguaje visual (mismo fondo, mismo radio, mismo ritmo de espaciado interno).
Tres industrias distintas, tres tonos distintos, el mismo patrón subyacente. El patrón no es moda. Es un diseño para un problema de comunicación específico: "hacemos muchas cosas, aquí están de un vistazo, escoge la que te importa."
Las matemáticas de la cuadrícula (más simples de lo que parecen)
La mayoría de los bento grids usan una de dos estructuras base.
El bento de 3 columnas. Bueno para secciones compactas, testimonios y destacados de funciones. Patrón típico:
- Una celda principal 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 principal 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 hijos y la cuadrícula se organiza sola. Las matemáticas son realmente así de simples. Lo que hace difícil al bento no es la cuadrícula. Es la decisión editorial sobre qué celdas merecen peso.
Reglas responsive que no se rompen
El bento en escritorio es fácil. El bento en móvil es donde la mayoría de las implementaciones fallan.
El error: mantener la forma de la cuadrícula y escalar todo hacia abajo. A 390px de ancho, un bento de 4 columnas se convierte en cuatro columnas de 90px, lo cual es inútil. Las celdas no pueden contener contenido real.
La regla: redistribuye, no reduzcas. 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 principal sube al tope (mayor impacto visual primero en móvil)
- Las celdas 2x1 anchas se convierten en celdas de columna única de ancho completo
- Las celdas 1x2 altas se convierten en celdas de altura estándar, no estiradas verticalmente
- El orden se decide de nuevo por importancia, no por posición visual en escritorio
CSS Grid hace esto sencillo con grid-template-areas y media queries. O, en Tailwind: usa prefijos lg: para aplicar spans de bento solo en pantallas grandes, y deja que el apilamiento móvil predeterminado se encargue solo.
| Punto de quiebre | Comportamiento de la cuadrícula |
|---|---|
| Escritorio (1280px+) | Bento completo, 4 columnas con spans variados |
| Tablet (768-1279px) | Bento simplificado, 2 columnas con algunos spans |
| Móvil (menos de 768px) | Columna única, reordenada por prioridad de contenido |
La prueba: a 390px, cada celda debe ser suficientemente alta para que el contenido dentro de ella sea legible sin zoom ni scroll horizontal. Si no lo es, la celda está mal, no el viewport.
Si quieres más análisis de diseño, explora el resto de Brainy Papers. Si necesitas una landing page que deje de perder visitantes ante un muro de filas de funciones, contrata a Brainy y enviamos diseños reales, copy real y conversiones reales.
Cuándo un bento grid es la decisión equivocada
El bento no es una solución universal. Úsalo mal y forzarás el contenido en celdas que necesitaban respirar.
El bento falla cuando:
- Tu contenido es secuencial. Un tutorial paso a paso, un flujo de incorporación, un caso de estudio narrativo. Estos necesitan orden lineal. El bento elimina el orden de lectura.
- Todo tiene el mismo peso. Si genuinamente tienes tres funciones iguales, una fila de tres columnas sigue siendo correcta. El bento requiere jerarquía interna. Aplanar en celdas bento hace que las cosas iguales parezcan clasificadas al azar.
- Cada celda necesita profundidad. Si tu función 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 sólidos. Los bento grids se leen mejor cuando las celdas contienen elementos visuales (gráficos, capturas del producto, ilustraciones). Los bentos de solo texto parecen diseños de periódico apretados.
Tabla de decisiones:
| Tu contenido es... | Usa |
|---|---|
| Una plataforma con peso de funciones desigual | Bento grid |
| Tres funciones iguales y paralelas | Fila de tres columnas |
| Una explicación narrativa | Pila de funciones (filas de ancho completo) |
| Un flujo paso a paso | Secciones numeradas |
| Una página de prueba estilo dashboard | Bento grid |
| Un análisis profundo de una función | Sección principal + secciones de apoyo |
El patrón de inicio del diseñador
Usa esto como base. Edita desde aquí, no construyas desde cero.
Estructura de la sección:
- Título de ancho completo sobre la cuadrícula (una línea, directo)
- Cuadrícula de 4 columnas, de 3 a 5 filas en total
- Una celda principal (2x2), el activo visualmente más fuerte
- De cuatro a seis celdas de apoyo, tipos de contenido variados
- Celda de cierre opcional de ancho completo para CTA o prueba
Reglas del contenido de las celdas:
- Una oración 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 interno consistente (generalmente 24-32px).
- Radio de esquina consistente (generalmente 12-16px).
- Uso de color contenido. La mayoría de las celdas comparten un fondo. Una o dos pueden invertir o usar acento.
Orden en móvil: celda principal primero, luego las tres celdas de apoyo más importantes, luego el resto.
Lanza una sección bento en tu próxima landing page. Vas a notar la diferencia.
Preguntas frecuentes
¿El bento grid es solo una tendencia?
No. Las tendencias duran uno o dos años. Los bento grids han sido dominantes en las principales páginas de productos desde 2022 y siguen siéndolo. Son un patrón de diseño 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. El bento es para superficies de producto y marketing. Las entradas de blog son secuenciales. Un hub de artículos o una cuadrícula de contenido destacado puede usar celdas desiguales estilo bento, pero el cuerpo completo de un artículo no debería usarlo.
¿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 composicional. Las celdas las coloca intencionalmente el diseñador según la importancia. Masonry funciona para Pinterest. Bento funciona para productos.
¿Funcionan los bento grids para dashboards?
Sí, cuando el dashboard tiene peso de widget desigual. Una métrica primaria, varias métricas secundarias, un gráfico, un registro, un feed de actividad reciente. Esta es exactamente la forma bento. Ver: la vista de proyecto de Linear, el dashboard de despliegues de Vercel.
¿Cuántas celdas debe tener un bento grid?
Entre cuatro y ocho. Con menos de cuatro deja de leerse como cuadrícula. Con más de ocho empieza a leerse como un muro. Siete es un punto medio común.
Deja de construir filas de características
Recorre cualquier sitio SaaS construido en los últimos tres años. Cuenta las filas de características de tres columnas que ves. Cuenta las secciones bento. Los números se invierten cada año.
Hay una razón. La fila de características era un diseño para una historia que dejamos de contar: la historia de las "tres funciones iguales". Los productos modernos no tienen tres funciones iguales. Tienen una plataforma, una capacidad principal, un grupo de capacidades de apoyo, 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 características. Rediseña esa sección como un bento grid. Pon la capacidad más fuerte en la celda principal. Pon la prueba en una celda de apoyo. Pon el diferenciador de una línea en otra. Lánzalo.
Observa cómo sube el tiempo de permanencia. Observa cómo baja el rebote. Observa cómo la página realmente trabaja.
Deja de construir filas de características.
Need a landing page that actually converts, not another feature-row wall? Brainy ships landing pages.
Get Started
