Uncode 2.9.1 introduces the ability to create Bento Grids a powerful layout that allows you to build justified columns within a grid layout. Inspired by the organized compartments of a traditional Japanese bento box, Bento Grids provide a modular and flexible approach to web design. This layout style is particularly effective for creating visually balanced, clean, and structured designs that are also fully responsive.

• Justified Bento Grids example

How it works

To create a Bento Grid layout, please follow these simple steps:

1. Set Row → Columns → Columns Height to Justify, screenshot ;
2. Insert Inner Rows into the Columns and set their height. It is recommended to use one fluid element with a height of 100% and another with a height determined by the actual footprint of the inner elements (e.g., height set to 0%), screenshot .

Bento Grids are ideal for showcasing content in a way that is both organized and aesthetically pleasing. By utilizing justified columns, you can ensure that all elements within a grid align perfectly, regardless of their individual sizes. This results in a harmonious and cohesive design where no space is wasted, and all content fits together seamlessly.