Bento Grids

Bento grids are a flexible and responsive layout system that allows you to create complex grid structures with ease. They are designed to adapt to various screen sizes and orientations, making them ideal for modern web applications.

Features

Responsive Design: Automatically adapts to different screen sizes
Flexible Layout: Combine different sized grid items for visual interest
Customizable: Easily modify colors, content, and styling to match your brand
Interactive Elements: Includes hover effects and animations for better user engagement

Basic Bento Grid

Open in

Usage

import BentoGrid1 from "@/components/mvpblocks/grids/bento-grid-1";
 
export default function MyPage() {
  return (
    <div>
      <BentoGrid1 />
    </div>
  );
}

Customization

You can customize the Bento grid by modifying the items array in the component:

const items = [
  {
    title: "Custom Title",
    description: "Your custom description here.",
    icon: <YourIcon className="h-5 w-5" />,
    size: "medium", // "small", "medium", or "large"
  },
  // Add more items as needed
];

Bento with details