bento

Apply a Bento grid layout with varying card sizes and information grouping.

Updated Feb 17, 2026

Search Tags:#design #ui #layout #content #grid #bento

Ready to run

npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill bento

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bento
Source: https://github.com/Gatsbyhateyou/gatsby-website/tree/main/style-gallery-skills/bento
Command: npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill bento

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create visually appealing and organized layouts using a modern, irregular grid system, inspired by popular design trends.

Core Features & Use Cases

Irregular Grid Layouts: Arrange content in blocks of varying sizes for a dynamic look.
Information Grouping: Clearly segment and present different types of information.
Use Case: Ideal for product pages, dashboards, or content-heavy landing pages that need a clean, Apple-like or Notion-inspired aesthetic.

Quick Start

Apply the Bento grid style to arrange content blocks with varying sizes and clear information grouping.

Frequently Asked Questions about bento

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is a Bento grid layout and how does it organize content?▼

To create a Bento grid layout, arrange content blocks of varying sizes to establish a dynamic look, ensuring consistent rounded corners and balanced white space to maintain clean, adjustable information density across your product pages.

Can I use irregular grid layouts for content-heavy dashboards?▼

Yes, irregular grid layouts are ideal for content-heavy dashboards and product pages. They group information clearly using varying block sizes, inspired by Apple and Notion block designs, to achieve a clean and modern aesthetic.

What is the best way to design a modern content layout like Notion?▼

The best way to design a modern content layout like Notion is applying a Bento grid style. This approach uses varying card sizes and clear information grouping, requiring consistent rounded corners and balanced white space for clean density.

Do I need specific UI components to build an irregular block grid?▼

No specific UI components are required to build an irregular block grid. You can apply the Bento layout style directly to your existing content blocks, focusing on varying card sizes and balanced white space rather than external dependencies.

Why should I use a Bento grid over a standard uniform grid for UI design?▼

You should use a Bento grid over a standard uniform grid when you need to group varying types of information clearly. It offers adjustable information density and a dynamic look, whereas uniform grids lack visual hierarchy for complex dashboards.