Apple, Notion y Stripe llevan dos años usando una estructura de layout que se ha convertido en la tendencia visual de 2026: el bento grid. Si has visto webs con celdas modulares de distinto tamaño que parecen una caja de bento japonesa, eso es. En este tutorial te enseño qué hace que un bento grid funcione (más allá de «queda bonito»), por qué jerarquiza información mejor que casi cualquier otro layout y cómo construir uno en Figma paso a paso, con consejos para que no se rompa en móvil.
Qué es un bento grid y de dónde viene
Un bento grid es un layout compuesto por celdas rectangulares de distinto tamaño, organizadas en una rejilla unificada que respeta gutters consistentes. El nombre viene de los bento japoneses, esas cajas de comida con compartimentos de distinto tamaño que separan elementos sin desperdiciar espacio. Llegó al diseño web vÃa Apple (sus páginas de iPhone usan bento desde 2022), y de ahà saltó al resto del sector.
Por qué es la tendencia visual de 2026
Tres motivos: jerarquiza naturalmente (la celda más grande es lo más importante), reduce decisiones del usuario (todo está visible al mismo tiempo), y se adapta bien a contenido heterogéneo (puedes mezclar texto, imagen, vÃdeo, datos sin romper el flujo). Además, encaja perfecto con el diseño de «naturaleza destilada» de 2026: paletas terrosas y tipografÃa amplia respiran mejor en celdas modulares.
AnatomÃa de un bento grid efectivo
Un bento grid bien hecho cumple cinco reglas: 1) rejilla base de 12 columnas (o 6 en móvil), 2) gutter constante entre celdas (16-32 px), 3) celdas que ocupen 1, 2, 3, 4 o 6 columnas (no fracciones raras), 4) al menos una celda dominante por sección, 5) radios de borde y sombras consistentes. Si rompes una sola, parece caótico en lugar de jerarquizado.
Tutorial paso a paso en Figma
Paso 1: crea un frame de 1440 px con auto layout vertical. Paso 2: añade una grid de 12 columnas con margin lateral 80 px y gutter 24 px. Paso 3: dentro, crea filas con auto layout horizontal y altura mÃnima 280 px. Paso 4: dentro de cada fila, añade celdas como rectángulos con auto layout interno y border-radius 24. Paso 5: distribuye con weights: una celda 6 columnas + dos de 3, o una de 8 + una de 4. Paso 6: añade contenido a cada celda manteniendo padding interno consistente (32 px).
Adaptarlo a responsive sin romperlo
El error más común es intentar mantener el bento en móvil. No funciona: las celdas se vuelven minúsculas. La regla en 2026 es: en móvil colapsa a una columna, manteniendo el orden de jerarquÃa (celda dominante primero). En tablet, dos columnas con un orden cuidadosamente reordenado. Solo en desktop mantén el bento original. Documenta los breakpoints como variantes de Figma.
5 ejemplos reales para inspirarte
Apple iPhone 16 page (la referencia inicial), Notion AI features page (uso magistral de jerarquÃa), Stripe Atlas (bento con datos), Linear changelog (bento minimalista) y Vercel features (bento con interactividad). Estudiar cómo distribuyen pesos te enseña más que cualquier curso.
Preguntas frecuentes
¿El bento grid funciona en móvil?
Solo si lo colapsas a una columna manteniendo el orden de jerarquÃa. Forzar el bento en móvil produce celdas demasiado pequeñas e ilegibles.
¿Cuántas celdas debe tener un bento grid?
Entre 4 y 9 por sección. Menos parece grid normal; más se vuelve agobiante. La distribución ideal: una celda dominante (6 columnas) + 2-4 celdas medianas (3-4 columnas) + opcionalmente celdas pequeñas (2 columnas).
¿Bento grid o grid tradicional para una landing?
Bento si tienes 4-8 elementos heterogéneos que jerarquizar. Grid tradicional si todo el contenido tiene el mismo peso (catálogo, listado, blog).
Conclusión
El bento grid es la herramienta de jerarquÃa visual más potente que tiene un diseñador en 2026. Bien hecho, comunica más en menos espacio que cualquier layout tradicional. Mal hecho, parece un puzzle sin armar. La diferencia: respetar las cinco reglas de anatomÃa y trabajar la versión móvil con la misma dedicación que la desktop.
