Bento Grid

A layout primitive that perfectly solves the "Bento Box" design trend. It uses custom CSS properties to manage grid spans, ensuring that asymmetric layouts smoothly degrade to a single column on mobile devices without hard-coded media queries breaking the flow.

Live Preview

Main Feature

This card spans two columns on medium screens and larger, drawing focus to primary content.

Quick Stat

99.9%

Sidebar Tool

Spans two rows to display vertical lists or deeper navigation.

Bottom Banner

Fills the remaining space nicely, creating a cohesive asymmetric layout.

Installation

CLI

npx @modus-ui/cli add bento-grid

Manual

Copy the code from the component tab.
Create a file at components/ui/bento-grid.tsx.
Paste the code.

Usage

tsx

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";

export default function Example() {
  return (
    <BentoGrid columns={3} gap={16}>
      <BentoCard colSpan={2}>Wide Card</BentoCard>
      <BentoCard colSpan={1}>Standard Card</BentoCard>
      <BentoCard colSpan={1} rowSpan={2}>
        Tall Card
      </BentoCard>
      <BentoCard colSpan={2}>Bottom Wide</BentoCard>
    </BentoGrid>
  );
}

Props

Prop	Type	Default	Description
`columns`	`number`	`3`	Number of grid columns.
`gap`	`number`	`16`	Gap between cards in pixels.