Bento UI Grids

Let’s dive into a design trend that has become an integral part of the UI/UX world – Bento Grids. Although these grids are no longer new to the design landscape, they remain relevant, efficient, and popular among designers and developers.

Inspired by traditional Japanese bento boxes, Bento Grids offer a structured and clear organization of content, making it easier for users to navigate. With a combination of well-defined visual hierarchy and minimalist design, Bento Grids provide a smooth and organized user experience. Their clean and functional design makes them an ideal choice for websites and applications that aim to offer an intuitive and aesthetic interface.

In the following post, we’ve gathered some stunning visual examples for inspiration.

---

Bento grids by @cactusui

The RDBP branding by Gal Shir

Bento grid by @kacperfyi

Bento by  Linearity

Boostio Branding, Brand Identity Design by Halo Branding for HALO LAB

Apple Event September 2022: iPhone 14 Pro

Bento Grid Usage for WhatsApp Case Study

W2E Conference Visual Identity by Halo Branding

Helper brand bento grid by bryangmotion

Bento at Givingli

Bento grid at Rise Calendar

Bento grid by @PJadeszko

Bento boxes by Nicolas Solerieu for GitHub

Bento Footer by Kyle Anthony Miller for Brass Hands

GitHub profile by Nicolas Solerieu

Kaine, Branding Mockups by Ruslanlatypov for ls.graphics

Bento grid v2.0 by Ghulam Rasool 🚀 for Upnow Studio

---

You can also try using the following tools and templates to start and build your Bento grid.

Bento Cards for Framer

Boost your Framer projects with versatile Bento Cards

---

Bento Cards: AI

Revolutionize your projects with Bento Cards v2: AI

---

BentoX — Portfolio Framer Template

BentoX is a portfolio template designed with a stunning & trendy bento grid style made in Framer. It empowers you to create your online presence and proudly showcase your finest work.

---

Zento – Dark Bento Portfolio Framer Template

Introducing Zento: a sleek Framer portfolio template. With Bento grid structure, Compact yet powerful.

---

Figma Bento Grid Template

Create stunning presentations in the style of Apple’s keynotes with the Figma Bento Grid Keynote template.

---

Bento Grid Template – Xpace Bento

---

Logo Bento Template

---

Bentos Grid for Web & UI Desig

Bentos Grid for Web & UI Design : This is a demo bento screen design created for a school assignment. The design utilizes an 8×8 square grid with a calming purple and blue theme.

---

Bento Grid Maker – Figma plugin

This plugin creates Bento Grid templates