Bento grid con CSS Grid

Por qué grid-template-areas y no un framework

Todos los bento de esta página están escritos con grid-template-areas, y es una decisión deliberada: el layout se lee como un dibujo. Donde el CSS dice "heroe notaA" arriba y "ancha ancha" abajo, estás viendo la composición literal de la página. Reordenar celdas es editar ese dibujo, no contar columnas ni calcular spans. Y el colapso móvil es otro dibujo: una columna con las áreas apiladas en el orden que tú decidas — que no tiene por qué ser el del marcado.

Cómo montar tu bento

1. Elige el layout más cercano a tu contenido y copia CSS y HTML.
2. Sustituye el contenido de cada celda. La jerarquía visual ya está resuelta: la celda protagonista es más grande y las demás la escoltan.
3. Ajusta el dibujo de grid-template-areas si tu contenido pide otra composición — añade filas, ensancha áreas, y revisa el segundo dibujo (el de la media query) para que el orden móvil siga contando la historia.

La regla del protagonista

Un bento funciona cuando una celda manda y las demás obedecen. Si todas las celdas pesan lo mismo, no tienes un bento: tienes una tabla. Antes de tocar el código, decide qué pieza es la protagonista de la sección — el producto, la cifra, el artículo — y dale el área grande. El resto de decisiones se toman solas.

Dónde encajan

• Portadas de producto: el clásico — héroe con captura, satélites con beneficios.
• Blogs y medios: el editorial — artículo principal alto, secundarios y faja de suscripción.
• Dashboards: el panel — métricas arriba, gráfico protagonista, lista de actividad.
• Portafolios: la galería — piezas cuadradas con dos protagonistas del doble de tamaño.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, botones y controles, tarjetas, formularios, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Qué es exactamente un bento grid?

Una composición de celdas de distinto tamaño inspirada en las cajas bento japonesas: compartimentos desiguales, ordenados y sin huecos. En diseño web se popularizó en portadas de producto porque permite mostrar muchas cosas con una jerarquía clarísima.

¿Por qué usar grid-template-areas en vez de grid-column y span?

Por legibilidad y mantenimiento: las áreas dibujan el layout dentro del CSS y reordenar es editar ese dibujo. Con spans numéricos, cada cambio obliga a recalcular posiciones. Para bentos irregulares de tamaño conocido, las áreas ganan siempre.

¿Cómo se comportan en móvil?

Cada receta trae su media query con el layout colapsado a una columna, y el orden de lectura móvil está decidido en el segundo dibujo de áreas — puedes cambiarlo sin tocar el HTML.

¿Qué hace grid-auto-flow: dense?

Permite que Grid rellene huecos con celdas que en el flujo normal vendrían después. En la galería evita los vacíos que dejan las piezas grandes. Ojo: reordena visualmente respecto al DOM, así que no lo uses si el orden de tabulación importa.

¿Puedo añadir más celdas a un layout?

Sí: añade el elemento en el HTML, dale un nombre de área en el CSS y colócalo en el dibujo. Si añades muchas, plantéate si la sección no está pidiendo dos bentos en vez de uno sobrecargado.

¿Los bento grids perjudican el SEO o la accesibilidad?

No por sí mismos: son CSS sobre HTML normal. La única precaución es no abusar de reordenar visualmente (con dense o con áreas) contenido cuyo orden lógico importa, porque el lector de pantalla sigue el orden del documento, no el visual.