Share
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
* Use the following designs for inspiration only. Please do not copy the designs.
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.
5. Typography
Emphasizes modularity and harmony with sense of good legibility.
🔡 Font recommendations
Various style of fonts are available in the MiriCanvas editor. Try using them into your design.
🖼️ MiriCanvas template showcase
