Un bento grid es un layout formado por celdas rectangulares de distinto tamaño, organizadas en una rejilla con espacios constantes entre ellas. El tamaño de cada celda comunica su importancia: la grande manda y las pequeñas acompañan.
En esta guía te explico de dónde viene y por qué funciona. Después lo diseñamos en Figma paso a paso con el auto layout en modo Grid. También verás las composiciones que mejor funcionan, cómo adaptarlo a móvil y el CSS para llevarlo a la web.
Qué es un bento grid y de dónde viene
El nombre viene de los bento japoneses, esas cajas de comida con compartimentos de distinto tamaño que separan los alimentos sin desperdiciar ni un hueco. En diseño lo popularizó Apple, que lo usa desde hace años en presentaciones y páginas de producto, y de ahí saltó al resto del sector.
La idea clave: no es una rejilla uniforme de tarjetas iguales. Es una composición donde el tamaño de cada celda marca la jerarquía. Sin esa diferencia de tamaños, tienes una cuadrícula normal.
Por qué funciona tan bien (y por qué es tendencia)
Hay tres razones de fondo, y ninguna es solo estética:
- Jerarquiza de forma natural. El ojo va primero a la celda más grande. Defines la importancia con el tamaño, sin flechas ni textos de «mira aquí».
- Reduce decisiones. Todo está visible a la vez, sin pestañas ni carruseles. El usuario abarca el conjunto de un vistazo.
- Absorbe contenido heterogéneo. Puedes mezclar texto, imagen, vídeo, datos o un gráfico en la misma sección sin que se vea desordenado.
Encaja además con la estética de 2026: tipografía amplia, bordes redondeados y mucho aire dentro de cada celda. Si trabajas con un sistema de espaciado de 8 puntos, el bento lo aprovecha especialmente bien.
Anatomía de un bento grid efectivo
Un bento que funciona cumple cinco reglas. Saltarte una es lo que separa un diseño jerarquizado de un puzzle sin armar.
| Regla | Recomendación |
|---|---|
| Rejilla base | 12 columnas en escritorio, 2 en tableta, 1 en móvil |
| Espacio constante | Entre 16 y 32 px, igual en todo el grid |
| Anchos de celda | Múltiplos limpios: 2, 3, 4 o 6 columnas |
| Celda dominante | Al menos una por sección que mande sobre las demás |
| Consistencia visual | Mismo radio de borde, sombra y padding en todas las celdas |
Si interiorizas solo una, que sea la cuarta: sin celda dominante no hay bento, hay una cuadrícula. La jerarquía es el corazón del patrón.
Tutorial paso a paso en Figma
Figma tiene un flujo de auto layout llamado Grid pensado justo para esto: coloca los elementos en filas y columnas y deja que cada uno ocupe varias celdas. Su propia documentación lo recomienda para bento boxes y dashboards. Así se monta:
- Crea el frame. Un frame de 1440 px de ancho para la sección. Si quieres, añade un layout grid de 12 columnas como guía visual (no se exporta).
- Activa auto layout en modo Grid. Con el frame seleccionado, activa auto layout (Mayús + A) y, en la barra lateral derecha, elige el flujo Grid.
- Define columnas, filas y espacios. Indica 12 columnas y 2 filas, y pon el gap en 24 px tanto en horizontal como en vertical.
- Añade las celdas. Cada celda es un frame con su propio auto layout vertical, fondo, radio de 24 px y padding de 32 px. Así el contenido nunca toca el borde.
- Pon las celdas en «Fill container». Es imprescindible para que puedan ocupar varias columnas o filas.
- Reparte los tamaños con el span. Selecciona cada celda y usa los campos Column span y Row span (o estírala en el lienzo hasta el borde de la celda). Por ejemplo: la dominante con 6 columnas y 2 filas, y cuatro celdas de 3 columnas alrededor.
- Convierte las celdas en componentes. Crea variantes S, M y L. Reutilizarlas y mantener la consistencia será inmediato.
Si tu versión de Figma todavía no muestra la opción Grid, puedes hacerlo a la antigua: filas con auto layout horizontal y celdas de ancho fijo calculado sobre la rejilla. Ten en cuenta que «Fill container» en un auto layout horizontal reparte el espacio a partes iguales. Por sí solo no te sirve para un 8 + 4.
Si te atascas con las fuentes al maquetar, repasa cómo añadir tipografías en Figma. Para sacar más partido a los componentes, mira mi guía de sistemas de diseño en Figma.
Composiciones de pesos que funcionan
No improvises la distribución. Estas combinaciones sobre una rejilla de 12 columnas dan resultado casi siempre:
- 6 + 3 + 3. Una dominante a la izquierda y dos de apoyo. La más versátil para una sección de características.
- 8 + 4. Un bloque protagonista enorme (imagen o vídeo) y una columna de texto. Ideal para un hero o un destacado.
- 4 + 4 + 4 con una celda de doble alto. Tres columnas donde una se estira en vertical para romper la simetría.
- 6 + 6 alternando alturas. Dos mitades que no miden lo mismo de alto; el desajuste controlado da dinamismo.
Regla práctica: entre 4 y 9 celdas por sección. Con menos parece una rejilla normal; con más, agobia.
Adaptarlo a responsive sin romperlo
El error que más se repite es intentar mantener el bento intacto en móvil. No funciona: las celdas quedan minúsculas e ilegibles. La estrategia correcta es por breakpoint:
- Escritorio (1024 px o más). El bento completo, con su celda dominante y los pesos repartidos.
- Tableta (768-1023 px). Dos columnas, reordenando con criterio: lo importante, primero.
- Móvil (menos de 768 px). Una sola columna, con las celdas apiladas en orden de jerarquía y la dominante arriba.
En Figma, documenta cada breakpoint como una variante del frame. Así el desarrollador ve exactamente cómo se reordena y no improvisa.
Del diseño al código: el bento en CSS Grid
Con CSS Grid, el paso de Figma a la web es casi directo. Este es un bento de 6 + 3 + 3 con una celda dominante de dos filas, adaptado a tableta y móvil:
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.celda { border-radius: 24px; padding: 32px; }
.celda--l { grid-column: span 6; grid-row: span 2; }
.celda--m { grid-column: span 3; }
@media (max-width: 1023px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.celda--l { grid-column: span 2; grid-row: auto; }
.celda--m { grid-column: span 1; }
}
@media (max-width: 767px) {
.bento { grid-template-columns: 1fr; }
.celda--l, .celda--m { grid-column: auto; }
}Con una celda celda--l y cuatro celda--m tienes la composición completa. Si CSS Grid aún te cuesta, empieza por esta guía de CSS Grid. Y si trabajas con Tailwind CSS v4, lo mismo se escribe con clases como grid-cols-12, col-span-6 y row-span-2.
Errores comunes que lo arruinan
- Todas las celdas iguales. Sin dominante no hay jerarquía; vuelve a ser una cuadrícula aburrida.
- Espacios irregulares. Huecos distintos entre celdas rompen al instante la sensación de rejilla unificada.
- Demasiadas celdas. Más de nueve por sección satura y se pierde el efecto de «todo a la vista».
- Radios y sombras mezclados. Una celda con borde de 8 px y otra de 24 px parece un error, no una decisión.
- Forzar el bento en móvil. El pecado capital. En móvil, una columna y jerarquía vertical.
Ejemplos reales para inspirarte
Estudiar cómo reparten pesos los que lo hacen bien enseña más que cualquier teoría. Las páginas de producto de Apple son la referencia clásica. También merece la pena mirar las páginas de producto de Notion, Stripe, Linear o Vercel, que suelen usar secciones modulares. Abre cualquiera, identifica la celda dominante y cuenta las columnas. Para más ideas de composición, mira estos ejemplos de hero sections.
Recursos y plugins de Figma
En la Comunidad de Figma encontrarás plantillas bento gratuitas si buscas «bento». Revisa en cada una que use auto layout, porque muchas están hechas con capas sueltas y cuesta adaptarlas. Tienes también mi selección de plugins de Figma para el día a día.
Tip: ¿trabajas para un cliente y vas con prisa? En Envato Elements tienes UI kits y plantillas de Figma con licencia comercial, muchas con secciones bento listas para adaptar a tu marca.
¿Te gustan este tipo de guías? Cada semana comparto recursos, plantillas y tutoriales de diseño web en mi newsletter.
Preguntas frecuentes
¿El bento grid funciona en móvil?
Solo si lo colapsas a una columna manteniendo el orden de jerarquía, con la celda dominante primero. Forzar el bento en pantallas pequeñas produce celdas demasiado diminutas para leerse.
¿Cuántas celdas debe tener un bento grid?
Entre 4 y 9 por sección: una dominante de 6 columnas, dos a cuatro medianas de 3-4 columnas y, si hace falta, alguna pequeña de 2. Con menos parece una rejilla normal; con más se vuelve abrumador.
¿Bento grid o grid tradicional para una landing?
Bento si tienes 4-8 elementos distintos que jerarquizar (características, ventajas, métricas). Grid tradicional si todo el contenido tiene el mismo peso, como un catálogo, un listado o un blog.
¿Qué opción de Figma uso para hacer un bento?
El auto layout en modo Grid. Permite definir columnas y filas y que cada celda ocupe varias con los campos de span. Con el auto layout horizontal clásico también se puede, pero tienes que calcular anchos fijos a mano.
¿El bento grid perjudica el SEO o la velocidad?
No por sí mismo. Es un patrón de maquetación; lo que afecta al rendimiento es cómo lo implementas, por ejemplo con imágenes pesadas o demasiado JavaScript. Cuida las imágenes de las celdas y vigila los Core Web Vitals.
¿Cómo paso el bento de Figma a código?
Con CSS Grid: defines las columnas y asignas a cada celda cuántas ocupa con grid-column y grid-row. Tienes el código completo más arriba, en el apartado de CSS.
Conclusión
El bento grid es una de las herramientas de jerarquía visual más potentes que tiene un diseñador en 2026. Bien hecho, comunica más en menos espacio que un layout tradicional; mal hecho, parece un puzzle sin armar. La diferencia está en respetar las cinco reglas y trabajar la versión móvil con la misma dedicación que la de escritorio. Abre Figma, activa el modo Grid y monta tu primera composición 6 + 3 + 3.
¿Vas a probar el bento en tu próximo proyecto? Cuéntame en los comentarios qué composición vas a usar.
