Important Notice: Do Not Use Editor 2.0 for Template Design 
Read more here
Sign In

Bento grid

The Bento Grid is a modern, modular layout system that uses a grid structure inspired by Bento boxes, with compartments for each content block. Often used in Apple interfaces and websites, it organizes content into neat, symmetrical boxes with clear visual separation.
💡
Key principles
1.
Modular layout
2.
Alignment
3.
Consistent spacing
4.
Icons and text
5.
Typography

1. Modular layout

•
Content is divided into distinct, flexible "compartments" or boxes, which can be resized and rearranged depending on the screen or device size.

2. Alignment

•
The design follows a symmetrical structure with content aligned neatly in rows and columns, often providing balance and harmony across the layout.

3. Consistent spacing

•
The whitespace that surrounds each compartment should have even width. Following a grid ensures uniformity in the placement of elements, creating a consistent user experience across different pages and platforms.

4. Icons and text

•
Placing icons, numbers, and text with of different sizes can be used to create emphasize and increase readability of information.
source: Apple Inc.

5. Typography

•
Emphasizes modularity and harmony with sense of good legibility.

🖼️ MiriCanvas template showcase

Made with Slashpage