Bento Grids: The Design Trend Of 2024

Introduction

There’s a new design trend that has been taking over the web lately.

And that is the “Bento Grid”.

This new layout style, which draws inspiration from the compartmentalised structure of Japanese bento boxes, has been successfully used by some of the most important brands in the world.

However, all that glitters is not gold, and in this article, we’ll learn everything about this topic, exploring both the positive and negative aspects.

What Exactly Are Bento Grids?

Bento grids, as the name suggests, are a grid-based layout that divides a website or design into distinct sections or compartments.

These compartments can vary in size and arrangement, creating a visually appealing and organised layout.

As I mentioned in the introduction, Bento grids are inspired by traditional Japanese bento boxes.

Bento grids can now be found everywhere, but who came up with this idea?

Where Did Bento Grids Come From?

As with most viral trends, it’s pretty hard to pinpoint the actual patient zero.

After doing a bunch of research online, most resources seem to point at Apple as the first big adopter of the bento grids.

However, at the time of writing (28 December 2023), Apple has already changed its website layout, and I can’t seem to find bento grids anywhere.

Nonetheless, after rewatching some of Apple’s latest events, I found that bento grids are used in every launch to transform dull specs into a beautiful, attention-grabbing layout.

Here are some examples I found:

But Apple is definitely not the only brand that decided to jump on this trend.

I won’t annoy you with a complete list of adopters, but you can check out this website I found, which showcases websites that have successfully employed the Bento Grid.

Why Are Bento Grids Gaining Popularity?

Now that we understand what Bento Grids are, let’s look at why they’re gaining so much traction.

After thinking about it for a while, I think these are the four main advantages of this layout:

1. Organisation

   → Bento grids CAN provide a clear and structured way to present information, making it easier for users to navigate and digest content.

   
   

2. Visual Appeal

   → The combination of different shapes and sizes within the grid creates visual interest and dynamism, breaking up monotony and making the design more engaging.

   
   

3. Flexibility

   → Bento grids offer a versatile layout that can adapt to various types of content and designs. There’s no limitation to what you can use them for.

   
   

4. Simplicity

   → Bento grids present information in a simple and straightforward way. They make it easy for users to understand groups and relationships between elements.

Potential Downsides Of Bento Grids

I love bento grids. I use them heavily throughout my website. However, I don’t want to give you a biased opinion.

That’s why I’m presenting you with both positive and negative sides, so you can have a complete vision of the trend and decide on your own whether to try it.

Here’s a list of downsides:

1. Overcrowding

   → If not used effectively, bento grids can lead to overcrowding and a cluttered appearance. It is important to use a variety of sizes and shapes to avoid monotony and to ensure that the grid layout does not overwhelm the content.

   
   

2. Usability

   → Using bento grids for every page element makes it difficult for the designer to convey a clear visual hierarchy. Every shape demands attention from the user and can make it challenging to navigate and find important information.

   
   

3. Context

   → Bento grids are not the best choice for all types of content, such as long-form text or complex data visualisations. You can’t fit an entire blog article or a dashboard in a bento box without hurting the user experience.

Will Bento Grids Be Relevant In 2024?

Whether you like bento grids or not, you can’t deny that they’ve gained a ton of popularity over the past few months.

The question is, will this trend still be relevant in 2024?

While it’s impossible to predict the future of design trends with absolute certainty, my prediction is that Bento Grids will definitely remain relevant in 2024.

Why do I think so? Good question.

I believe that bento grids will remain relevant in 2024 due to their versatility, user-friendliness, and ability to adapt to various content types and design styles.

While you might not see them as the main theme of a webpage, they’re likely to still be used to display information, features, specs…

FAQs

Q1 - What Is A Bento Grid Layout?

A bento grid layout is a web design layout inspired by the concept of a bento box in the Japanese culture. It divides an entire website or a section into boxes of various sizes and shapes, similar to the compartments in a bento box.

Q2 - How Do I Create A Bento Grid Layout?

The concept behind bento boxes is very similar to CSS grids, making CSS grids an excellent tool for creating bento grid layouts.

Q3 - What is the inspiration behind the Bento grid layout?

The bento grid layout takes inspiration from the compartmentalised structure of traditional Japanese bento boxes, where various food items are neatly arranged within separate sections.

Q4 - When Should I Use Bento Grids?

You can use bento grids whenever you want a flexible and visually appealing layout to organise information. However, avoid them if you have to display long-form content such as case studies or your personal story.

Q5 - Who Introduced The Bento Grid Trend?

The exact origins of the bento grid layout are difficult to pinpoint. However, most resources I could find online pointed to Apple as the first introducer of this trend.

Conclusion

Thank you for taking the time to read the whole article. I hope you found it helpful.

If you need any help with designing and/or building your website, don’t hesitate to reach out.

If you’ve found this article helpful, I kindly invite you to share it with a friend who might benefit from it!