Free online CSS Bento Grid layout generator. Visually create Bento grid layouts, adjust rows, columns, gaps, spanning, live preview and one-click copy CSS code. Pure frontend, no server uploads. · Zero Dependencies·Works Offline
Click a card in the preview to select it, then set spanning
The CSS Bento Grid Layout Generator is a visual tool that helps designers and developers quickly create popular Bento-style grid layouts. Through intuitive click operations and parameter adjustments, easily achieve card spanning across rows and columns for a modern layout, and generate ready-to-use CSS and HTML code with one click.
Create data visualization dashboards with cards of different sizes displaying charts, statistics, and key metrics.
Display product features with large cards highlighting core features and small cards listing supporting features.
Showcase design work with cards of varying sizes for visual hierarchy and impact and visual hierarchy.
Bento Grid layout is named after the compartmental arrangement of Japanese bento boxes. After Apple extensively used this layout in iOS and macOS in 2023, it quickly became a UI design trend. CSS Grid's grid-column and grid-row properties are the core of implementing Bento layouts, combined with grid-template-columns to define column count and sizes for flexible irregular grid arrangements.
A Bento Grid layout is a grid design style inspired by Japanese bento boxes, featuring cards of different sizes arranged together to create a visually rich and organized composition.
Bento Grid is essentially a CSS Grid application, but emphasizes irregular card spanning across rows and columns for visual hierarchy. Regular Grid typically uses uniform arrangement, while Bento Grid pursues an aesthetically pleasing mix of sizes.
Use grid-column and grid-row properties. For example, grid-column: span 2 spans 2 columns, grid-row: span 2 spans 2 rows. You can also use grid-area to specify exact positions.
Ideal for dashboards, product showcase pages, portfolios, and feature introduction pages that need to display content cards of various sizes. Apple, Stripe, and other major websites widely use this layout.
On mobile, reduce columns (e.g., from 4 to 1-2), remove spanning, and stack cards in a single column. Use auto-fill or media queries for responsive behavior.