Bento Grid
Asymmetric bento grid mixing large and small feature tiles.
Asymmetric bento grid mixing large and small feature tiles.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
An asymmetric bento layout that mixes one large showcase tile with smaller and wide supporting tiles. The hero tile spans two columns and two rows and carries a media panel above its caption, while the remaining cells hold icon backed feature callouts at varying spans. The result is a lively, magazine style grid that still feels balanced.
The grid uses auto-rows-[13rem] fixed row heights with grid-cols-2 on smaller screens and grid-cols-3 on large ones, so the column and row spans compose into the bento shape. Every tile shares a rounded-box border on bg-base-100, keeping the surface consistent across themes.
Rearrange the mosaic by editing the col-span and row-span utilities on each tile, then recolor everything at once by switching the daisyUI theme since the borders and badges use semantic tokens. Swap the Placeholder in the hero tile for a product screenshot to anchor the grid.
Product overviews where one capability leads and several others support it.