Bento Grid

A flexible grid layout system inspired by the popular “bento box” design pattern. Perfect for showcasing features, content, and interactive elements in an organized, visually appealing manner with responsive design built-in.

Features

Responsive Design: Automatically adapts to different screen sizes
Flexible Grid System: 12-column grid with customizable spans
Multiple Item Sizes: Pre-configured sizes (small, medium, large, tall)
Interactive Elements: Support for links, icons, and images
Hover Effects: Smooth transitions and visual feedback
Customizable: Easy to style and extend

Basic Usage

import BentoGrid from "@/components/block/BentoGrid.astro"
import BentoItem from "@/components/block/BentoItem.astro"

<BentoGrid
  title="Feature-rich layout that captures attention"
  tagline="Bento grid section"
  description="Showcase your features in a beautiful, organized grid layout."
>
  <BentoItem 
    title="Feature One" 
    description="Description of your first feature"
    size="medium"
  />
  <BentoItem 
    title="Feature Two" 
    description="Description of your second feature"
    size="large"
  />
  <BentoItem 
    title="Feature Three" 
    description="Description of your third feature"
    size="tall"
  />
</BentoGrid>

Example

What's included

Powerful Documentation Features

Everything you need to create beautiful, functional documentation sites with modern design patterns and user experience.

Responsive Design

Looks great on all devices with mobile-first responsive design patterns.

Component Library

Pre-built components following design system principles for consistent user interfaces.

Search Integration

Built-in search functionality to help users find content quickly and efficiently.

Theme Support

Light and dark theme support with customizable color schemes and typography.

Fast Performance

Optimized for speed with static generation and modern build tools.

Easy Deployment

Deploy anywhere with static hosting or modern platforms.

Props

BentoGrid Props

Prop	Type	Default	Description
`title`	`string`	`"Feature-rich layout that captures attention"`	Main heading for the grid section
`tagline`	`string`	`"Bento grid section"`	Small tagline above the title
`description`	`string`	Default description	Descriptive text below the title
`variant`	`'default' \| 'centered' \| 'compact'`	`'default'`	Visual variant of the grid
`className`	`string`	`''`	Additional CSS classes

BentoItem Props

Prop	Type	Default	Description
`title`	`string`	`undefined`	Item title
`description`	`string`	`undefined`	Item description
`icon`	`any`	`undefined`	Icon component or HTML
`image`	`string`	`undefined`	Image URL
`href`	`string`	`undefined`	Link URL (makes item clickable)
`className`	`string`	`''`	Additional CSS classes
`colSpan`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12`	Auto	Number of columns to span
`rowSpan`	`1 \| 2 \| 3 \| 4`	Auto	Number of rows to span
`size`	`'small' \| 'medium' \| 'large' \| 'tall'`	`'medium'`	Pre-configured size

Size Variants

The size prop provides convenient presets for common layouts:

Small Items

<BentoItem size="small" title="Quick Feature" description="Brief description" />

Medium Items (Default)

<BentoItem size="medium" title="Standard Feature" description="Standard description length" />

Large Items

<BentoItem size="large" title="Major Feature" description="More detailed description for important features" />

Tall Items

<BentoItem size="tall" title="Highlighted Feature" description="Prominent feature that needs extra visual space" />

Custom Grid Spans

For precise control, use colSpan and rowSpan:

<BentoGrid>
  <BentoItem colSpan={6} rowSpan={2} title="Half-width, Double-height" />
  <BentoItem colSpan={3} title="Quarter-width" />
  <BentoItem colSpan={3} title="Quarter-width" />
  <BentoItem colSpan={12} title="Full-width" />
</BentoGrid>

With Icons and Images

<BentoGrid>
  <BentoItem 
    title="Documentation"
    description="Comprehensive guides and tutorials"
    icon={`<svg>...</svg>`}
    size="medium"
  />
  <BentoItem 
    title="Gallery"
    description="Visual showcase of features"
    image="/path/to/image.jpg"
    size="large"
  />
</BentoGrid>

Interactive Items

Make items clickable by adding the href prop:

<BentoGrid>
  <BentoItem 
    title="Getting Started"
    description="Learn the basics"
    href="/docs-site-kickstarter/docs/getting-started"
    size="medium"
  />
  <BentoItem 
    title="GitHub Repository"
    description="View source code"
    href="https://github.com/your-repo"
    size="medium"
  />
</BentoGrid>

Responsive Behavior

The Bento Grid automatically adapts to different screen sizes:

Desktop (1024px+): 12-column grid with full layout control
Tablet (768px-1023px): 8-column grid with adjusted spans
Mobile (640px-767px): 4-column grid with simplified layout
Small Mobile (<640px): 2-column grid with stacked items

Customization

Custom Styling

Add custom classes to modify appearance:

<BentoGrid className="my-custom-grid">
  <BentoItem className="custom-item-style" title="Custom Item" />
</BentoGrid>

CSS Variables

The component uses CSS custom properties that can be overridden:

.bento-grid-section {
  --bento-gap: 1.5rem;
  --bento-border-radius: 0.875rem;
  --bento-padding: 1.5rem;
}

Accessibility

Items with href are properly marked as links
External links include rel="noopener noreferrer"
Proper heading hierarchy is maintained
Images include alt text support
Keyboard navigation is supported for interactive elements

Best Practices

Content Balance: Keep item content balanced across the grid
Visual Hierarchy: Use size variants to create clear information hierarchy
Responsive Testing: Test layouts across different screen sizes
Performance: Optimize images and icons for fast loading
Accessibility: Ensure proper contrast and keyboard navigation

Examples in the Wild

Feature showcases
Product galleries
Dashboard layouts
Portfolio grids
Service offerings
Team member displays
Testimonial collections

Reusable Components

Layout Components

Block Components

UI Components